html {
font-family : "Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display : block;
}
b, strong {
font-weight : 700;
}
small {
font-size : 80%;
}
sub, sup {
position : relative;
font-size : 55%;
line-height : 0;
vertical-align : baseline;
}
sup {
top : -0.5em;
}
sub {
bottom : -0.25em;
}
body {
margin : 0;
overflow-x : hidden;
height : 100vh;
width : 100vw;
font-family : "Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
background : url("https://dec.lv/images/1/1osnova_yes.jpg") center center no-repeat fixed;
background-size : cover;
}
* {
box-sizing : border-box;
}
a {
background-color : transparent;
}
a:active {
outline : 0;
text-decoration : none;
}
a {
color : #337ab7;
text-decoration : none;
}
a:focus, a:hover {
color : #23527c;
text-decoration : underline;
}
a:focus {
outline : thin dotted;
outline-offset : -2px;
}
a, a:visited {
text-decoration : underline;
}
p {
margin-bottom : 1.1em;
font-family : "Josefin Slab", "Helvetica Neue", Helvetica;
font-size : 20px;
}
p a {
text-decoration : none;
}
p a:hover {
text-decoration : underline;
}
P:first-letter {
font-family : "Josefin Slab", "Helvetica Neue", Helvetica;
font-size : 24px;
font-weight : 800;
padding-left : 20px;
color : #906;
}
p:first-child {
font-size : 1.1em;
font-style : normal;
}
p:first-child:first-line {
font-weight : bold;
font-style : italic;
}
div a {
text-decoration : none;
}
div a:hover {
text-decoration : underline;
}
h1, h2, h3, h4 {
  margin : 1.0em 0 0.5em; 
font-weight : 400;
line-height : 0.9;
}
h3 a {
text-decoration : none;
}
h1 {
margin-top : 0;
font-size : 1.7em;
}
h2 {
font-size : 1.5em;
}
h3 {
font-size : 1.3em;
}
h4 {
font-size : 1.2em;
}
h5 {
font-size : 1.1em;
}
h6 {
font-size : 0.8em;
}
small {
color : #999999;
font-size : 0.75em;
}
sub, sup {
position : relative;
font-size : 55%;
line-height : 0;
vertical-align : baseline;
}
img, iframe {
max-width : 100%;
height : auto;
display : block;
margin : 0 auto;
margin-bottom : 12px;
padding : 0.1em;
box-shadow : 4px 4px 20px 0 rgb(0, 0, 0, 0.25);
/* -ms-interpolation-mode:bicubic; */  
border-radius:7px;
}
li {
list-style-type : none;
}
ul {
margin-left : 0;
padding-left : 0;
}
article {
columns : 2 300px;
column-gap : 2em;
column-fill : balance-all;
max-width : 1480px;
max-height : 100%;
min-height : 100px;
column-rule : cornflowerblue 0 dotted;
}
@media only screen and (max-width: 400px) {
body {
font-size : 90%;
}
}
@media only screen and (max-width: 800px) {
body {
font-size : 100%;
}
}
@media only screen and (min-width: 1100px) {
body {
font-size : 120%;
}
}
.header {
padding : 30px;
font-size : 40px;
text-align : center;
background : white;
}
.leftcolumn {
float : left;
width : 75%;
}
.rightcolumn {
float : left;
width : 25%;
padding-left : 20px;
}
.fimg {
width : 100%;
padding : 20px;
}
.card {
background : rgb(255, 255, 255, 0.7);
border-radius : 7px;
display : block;
margin : 0 auto;
padding : 20px;
margin-top : 20px;
}
.row:after {
content : "";
display : table;
clear : both;
}
.footer {
padding : 20px;
text-align : center;
margin-top : 20px;
font-size : 15px;
padding-right : 15px;
padding-left : 15px;
margin-right : auto;
margin-left : auto;
border-radius : 7px;
}
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width : 100%;
padding : 0;
}
}
.container20 {
padding-right : 15px;
padding-left : 15px;
margin-right : auto;
margin-left : auto;
}
@media (min-width: 768px) {
.container20 {
width : 750px;
}
}
@media (min-width: 1024px) {
.container20 {
width : 999px;
}
}
@media (min-width: 1280px) {
.container20 {
width : 1260px;
}
}
@media (min-width: 1440px) {
.container20 {
width : 1420px;
}
}
@media (min-width: 1599px) {
.container20 {
width : 1520px;
}
}

#vmeste {
margin : 0 auto;
page-break-inside : avoid;
break-inside : avoid-column;
display : table;
}

.rama {
padding : 2px 0 5px 0;
border : #ACD1E9 solid 1px;
overflow : hidden;
position : relative;
box-shadow : 1px 1px 2px rgb(0, 0, 0, 0.2);
border-radius : 50px;
}

.transform-border1 {
position : relative;
margin : 10px auto;
transform : perspective(2000px) rotateY(29deg);
}
.transform-border1 img {
display : block;
width : 100%;
box-shadow : -12px 11px 1px #f2f2f2;
}
.transform-border1:after {
content : "";
position : absolute;
width : 100%;
height : 100%;
left : -22px;
top : 22px;
background : #cccccc;
z-index : -1;
}
@media only screen and (min-width: 500px) {
.transform-border1 {
position : relative;
max-width : 300px;
margin : 5px auto;
transform : perspective(2000px) rotateY(29deg);
}
}
.transform-border {
position : relative;
max-width : 400px;
margin : 40px auto;
transform : perspective(3000px) rotateY(29deg);
}
.transform-border img {
display : block;
width : 100%;
box-shadow : -12px 11px 1px #f2f2f2;
z-index : 100;
}
.transform-border:after {
content : "";
position : absolute;
width : 100%;
height : 100%;
left : -22px;
top : 22px;
background : #ebebeb;
z-index : -1;
}
.transform-border2 {
position : relative;
text-align : center !important ;
max-width : 300px;
margin : auto;
transform : perspective(3000px) rotateY(29deg);
margin-bottom : 35px;
}
.transform-border2 img {
display : block;
text-align : center !important ;
margin : 0 auto;
width : 100%;
box-shadow : -12px 11px 1px #f2f2f2;
}
.transform-border2:after {
content : "";
position : absolute;
text-align : center !important ;
width : 100%;
height : 100%;
left : -22px;
top : 22px;
background : #cccccc;
z-index : -1;
}

/* new trans */ 

  .transform-border3 {
position : relative;
text-align : center!important ;
max-width : 375px;
margin : auto;
transform : perspective(3000px) rotateY(30deg);
margin-bottom : 35px;
}
.transform-border3 img {
display : block;
text-align : center !important ;
margin : 0 auto;
width : 100%;
box-shadow : -10px 8px 1px #f2f2f2;
}
.transform-border3:after {
content : "";
position : absolute;
text-align : center !important ;
width : 90%;
height : 108%;
left : -10px;
top : 0px;
background : #cccccc;
z-index : -1;
}






.brand-before {
margin : 10px 0;
text-align : center;
}
.brand-name {
margin : 0;
font-size : 4em;
}
.tagline-divider {
margin : 5px auto 0;
max-width : 250px;
color : #999999;
background-color : #999999;
}
@media screen and (min-width: 768px) {
.brand {
display : inherit;
margin : 0;
padding : 5px 0 10px;
text-align : center !important ;
text-shadow : 1px 1px 2px rgb(0, 0, 0, 0.5);
font-family : "Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size : 2.9em;
font-weight : 400;
line-height : normal;
color : #fff;
}
.address-bar {
display :inherit; /*   */
  margin : 0;
padding : 0 0 20px;
text-align : center;
text-shadow : 1px 1px 2px rgb(0, 0, 0, 0.5);
font-size : 0.9em;
font-weight : 400;
letter-spacing : 3px;
color : #fff;  
}
}

@media screen and (max-width: 767px) 
{ 
.address-bar {
display :none;
 } 
 }


.sq-btn {
display : inline-block;
position : relative;
min-width : 178px;
max-width : 270px;
margin : 6px 28px;
padding : 15px 10px;
font-weight : 800;
font-family : sans-serif;
font-size : 14px;
text-transform : uppercase;
letter-spacing : 1px;
color : #0010ff;
transition : 0.15s ease-out;
box-sizing : border-box;
text-decoration : none;
}
.btn-one {
color : #ff9585;
}
.sq-btn:last-of-type {
margin : 6px 28px;
}
.sq-btn:before {
content : " ";
position : absolute;
top : -6px;
left : 0;
height : calc(100% + 12px);
width : 100%;
border : #0010ff solid 2px;
box-sizing : border-box;
transition : 0.2s ease-in-out;
}
.btn-one:before {
border : #ff9585 solid 2px;
}
.sq-btn:after {
content : " ";
position : absolute;
top : 0;
left : -8px;
height : 100%;
width : calc(100% + 16px);
border : #0010ff solid 1px;
box-sizing : border-box;
transition : 0.2s ease-in-out;
}
.btn-one:after {
border : #ff9585 solid 1px;
}
.sq-btn:hover:before {
top : 0;
left : -8px;
height : 100%;
width : calc(100% + 16px);
}
.sq-btn:hover:after {
top : -6px;
left : 0;
height : calc(100% + 12px);
width : 100%;
}
.transparent {
position : relative;
max-width : 400px;
padding : 40px 30px;
margin : 20px auto 0;
background-image : url(https://www.dec.lv/dc/css/roses.jpg);
background-size : cover;
}
.transparent:before {
content : "";
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
background : linear-gradient(to right bottom, rgb(43, 44, 78, 0.5), rgb(104, 22, 96, 0.5));
}
.form-inner {
position : relative;
}
.form-inner h3 {
position : relative;
margin-top : 0;
color : white;
font-family : 'Roboto', sans-serif;
font-weight : 300;
font-size : 26px;
text-transform : uppercase;
}
.form-inner h3:after {
content : "";
position : absolute;
left : 0;
bottom : -6px;
height : 2px;
width : 60px;
background : #1762EE;
}
.form-inner input {
display : block;
width : 100%;
padding : 0 15px;
margin : 10px 0 15px;
border-width : 0;
line-height : 40px;
border-radius : 20px;
color : white;
background : rgb(255, 255, 255, 0.2);
font-family : 'Roboto', sans-serif;
}
.form-inner input[type="submit"] {
background : #1762EE;
}

/* menu */ 

.topnav {
overflow : hidden;
background-color : #3d88ce;
margin-top : 0;
}
.topnav a {
float : left;
display : block;
color : #f2f2f2;
text-align : center;
padding : 14px 16px;
text-decoration : none;
font-size : 22px; 
}
.active {
background-color : #4CAF50;
color : white;
font-size : 18px;
}
.topnav .icon {
display : none;
}
.dropdown {
float : left;
overflow : hidden;
}
.dropdown .dropbtn1 {
font-size : 22px;
border : none;
outline : none;
color : white;
padding : 14px 16px;
background-color : inherit;
font-family : inherit;
margin : 0;
}
.dropdown-content {
display : none;
position : absolute;
background-color : #f9f9f9;
min-width : 160px;
box-shadow : 0 8px 16px 0 rgb(0, 0, 0, 0.2);
z-index : 1;
}
.dropdown-content a {
float : none;
color : black;
padding : 12px 16px;
text-decoration : none;
display : block;
text-align : left;
}
.topnav a:hover, .dropdown:hover .dropbtn1 {
background-color : #555;
color : white;
}
.dropdown-content a:hover {
background-color : #ddd;
color : black;
}
.dropdown:hover .dropdown-content {
display : block;
}
/*  a:not(:first-child)*/

@media screen and (max-width: 768px) {
.topnav a:nth-last-child(-n+8), .dropdown .dropbtn1 {
display : none;
}
.topnav a.icon {
float : right;
display : block;
margin-right : 20px;
}
}
@media screen and (max-width: 768px) {
.topnav.responsive {
position : relative;
}
.topnav.responsive .icon {
position : absolute;
right : 0;
margin-right : 10px;
top : 0;
}
.topnav.responsive a {
float : none;
display : block;
text-align : left;
}

.topnav .active {
background-color : #4CAF50;
color : white; text-align:left;
font-size : 18px; max-width:38px;
}

.topnav.responsive .dropdown {
float : none;
}
.topnav.responsive .dropdown-content {
position : relative;
}
.topnav.responsive .dropdown .dropbtn1 {
display : block;
width : 100%;
text-align : left;
}
}


.wrap {
background : linear-gradient(90deg, #EFEFE7 50%, #BCE8EA 50%);
position : relative;
padding : 40px 25px 40px 25px;
box-sizing : border-box;
border-radius : 7px;
margin-top : 20px;
}
.wrap:before, .wrap:after {
content : "";
position : absolute;
width : 50%;
height : 10px;
background : linear-gradient(90deg, #BCE8EA 50%, #EFEFE7 50%);
left : 25%;
}
.wrap:before {
top : 15px;
}
.wrap:after {
bottom : 15px;
}
/*
.wrap p {
background : white;
margin : 0;
padding : 50px 0;
text-align : center;
font-family : 'Open Sans', sans-serif;
font-style : italic;
color : #7A7B82;
line-height : 1.5;
}
  */ 
  
@media screen and (max-width: 600px) {
.wrap {
background : linear-gradient(90deg, #EFEFE7 50%, #BCE8EA 50%);
position : relative;
padding : 20px 10px 20px 20px;
box-sizing : border-box;
border-radius : 7px;
margin-top : 20px;
}

/* 
.wrap p {
background : white;
margin : 0;
text-align : center;
font-family : 'Open Sans', sans-serif;
color : #7A7B82;
line-height : 0.1;
}
 */ 
 
.wrap:before {
top : 10px;
}
.wrap:after {
bottom : 10px;
}
}

/*
 .sign {  float: left;   border: 0px solid #333;  padding: 4px;  margin:5px;  background: #f0f0f0;   text-align: left; max-width:305px;border-radius: 7px;   }
 .sign span {   margin: 0 auto 5px;   }
 .sign img { margin: 0 auto; }

*/ 
 
 <!-- подпись по фотоками ---> 
 .sign {
  float: left;  /* Выравнивание по правому краю */
    border: 0px solid #333; /* Параметры рамки */
    padding: 4px; /* Поля внутри блока */
    margin:5px;  /* Отступы вокруг 10px 0 5px 5px */
    background:#faf5f5; /* Цвет фона сер #f0f0f0 */ 
    text-align: left; /* Выравнивание по центру */
    max-width:500px; /* 305 */
   }
   .sign p {
    margin: 0 auto 1px; /* Отступы вокруг абзаца */
   }
  .sign img { margin: 0 auto; }