form {
 margin-block-end:0; 
}

.text-part {
  color:black; 
}

@media screen and (max-width:900px) {
  .text-part {
    display:flex;
    flex-direction:column;
  }
  
  .photo {
    width:90vw; 
    position:relative;
  }  
  
  #image {
    transform:scale(1) !important;
  }
  
  .form-part {
    order:2 
  }
  
  #photoImageInfo {
    order:1;
    font-size:16px;
  }  
  
  #button-line {
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    padding-bottom:70px;
    order:3
  }
  
  #ribbon2 {
   display:none; 
  }
}

@media screen and (min-width:900px) {
  body {
    overflow-x:hidden;
  }

  div.__imagePreviewer.defToggleClass {
    display:none !important;
  }
  
  .photo{
    height:100%;
    width:100%;
    position:relative;
    overflow:scroll;
  }
  
  .text-part {
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    height:calc(100% - 10px);
    padding-top:10px;
    transform-origin: top left;
  }
    
  .container-part {
    order:1 
  }
  
  #photoImageInfo {
    order:2;
    font-size:16px;
  }
  
  #button-line {
   display:flex;
   flex-direction:column;
   min-height:180px;
   justify-content:space-between;
  }
  

#ribbon2 {
	width: 180px;
	height: 280px;
	right:0;
	position: absolute;
	overflow: hidden;
	zoom:75%; 
	z-index:1;
}

#ribbon2 .ribbon2-inset {
	width: 200px;
	height: 55px;
	position: absolute;
	top: -50px;
	left: -10px;
	z-index:1;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	background: rgba(0,0,0,0.3);
	
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}

#ribbon2 .ribbon2-container {
	position: relative;
	width: 100px;
	height: 150px;
	overflow: hidden;
	margin: 0 auto;
	border-left: 1px solid #631a15;
	border-right: 1px solid #631a15;
}

#ribbon2 .ribbon2-base {
	height: 100px;
	width: 100px;
	
	background: rgb(199,59,60);
	background: -moz-linear-gradient(top,  rgba(199,59,60,1) 0%, rgba(184,32,31,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(199,59,60,1)), color-stop(100%,rgba(184,32,31,1)));
	background: -webkit-linear-gradient(top,  rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
	background: -o-linear-gradient(top,  rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
	background: -ms-linear-gradient(top,  rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
	background: linear-gradient(top,  rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c73b3c', endColorstr='#b8201f',GradientType=0 );

	position: relative;
	z-index: 1;
}

#ribbon2 .ribbon2-base:after {
	content: '';
	position: absolute;
	top: 0;
	width: 86px;
	left: 6px;
	height: 142px;
	border-left: 1px dashed #631a15;
	border-right: 1px dashed #631a15;
}

#ribbon2 .ribbon2-base:before {
	content: '';
	position: absolute;
	top: 0;
	width: 86px;
	left: 7px;
	height: 142px;
	border-left: 1px dashed #da5050;
	border-right: 1px dashed #da5050;
}

#ribbon2 .ribbon2-left_corner {
	width: 100px;
	height: 100px;
	background: #b8201f;
	position: absolute;
	bottom: 8px;
	left: -50px;
	
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	transform: rotate(60deg);
}

#ribbon2 .ribbon2-right_corner {
	width: 100px;
	height: 100px;
	background: #b8201f;
	position: absolute;
	bottom: 8px;
	right: -50px;
	
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	transform: rotate(30deg);
}  

.coverDesign.yellow #ribbon2 {
  left:0;
}
}

#bookPage {
  width:40px;
}

form input[type=text] {
  cursor:default;
  font-size:16px;
  background:pink;
}  

form select {
  font-size:16px;
  cursor:default;
}  

form input[type=number] {
  font-size:16px;
  width:70px;
}

@media only screen and (min-width:900px) and (max-height:700px) { 
  .text-part {
    transform:scale(0.9);
    font-size:14px;
  }
  
  form input[type=text], form select, form input[type=number] {
    cursor:default;
    font-size:14px;
  }
  
  #photoImageInfo {
    font-size:14px;
  }  
}

#image {
  transform-origin: top left;
  max-width: 100%;
  max-height: 100%;  
  cursor:zoom-in;
}

@media only screen and (min-width:900px) and (max-height:650px) { 
  .text-part {
    transform:scale(0.85);
  }
}

@media only screen and (min-width:900px) and (max-height:625px) { 
  .text-part {
    transform:scale(0.8);
  }
}

@media only screen and (min-width:900px) and (max-height:600px) { 
  .text-part {
    transform:scale(0.75);
  }
}

@media only screen and (min-width:900px) and (max-height:575px) { 
  .text-part {
    transform:scale(0.7);
  }
}

@media only screen and (min-width:900px) and (max-height:550px) { 
  .text-part {
    transform:scale(0.65);
  }
}

@media only screen and (min-width:900px) and (max-height:525px) { 
  .text-part {
    transform:scale(0.6);
  }
}

@media only screen and (min-width:900px) and (max-height:500px) { 
  .text-part {
    transform:scale(0.55);
  }
}