body, div, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }

@font-face {
  font-family: 'Quicksand-SemiBold';
  src: url('/Quicksand-SemiBold.woff2') format('woff2'),
       url('/Quicksand-SemiBold.woff') format('woff');
  font-display: swap;
}

body {
  font-family: 'Quicksand-SemiBold', sans-serif;
}

main {
   background-color: white;
    margin: 0 auto; 
}
/* Style the navigation bar */
.navbar {
    background-color: #282851; /* Background color for the navbar */
    color: #fff; /* Text color for the navbar */
    padding: 10px 0; /* Increased padding for the top and bottom of the navbar */
}
.container-nav {
    max-width: 1200px; /* Set a maximum width for the content */
    margin: 0 auto; /* Center the content horizontally */
    display: flex;
    justify-content: space-between; /* Align the logo and menu at opposite ends */
    align-items: center; /* Vertically center the content */
}
.logo {
    font-size: 24px; /* Font size for the logo */
    text-decoration: none; /* Remove underline from the logo */
    padding-left: 20px;
    color: #fff; /* Text color for the logo */
}
.menu {
    list-style: none; /* Remove bullet points from the menu */
    display: flex;
    align-items: center; /* Center the menu vertically */
}
.menu li {
    margin-right: 20px; /* Add spacing between menu items */
}
.menu a {
    text-decoration: none; /* Remove underline from menu links */
    color: #fff; /* Text color for menu links */
    font-weight: bold; /* Make menu links bold */
     font-size: 24px; /* Larger font size for menu links */
    transition: color 0.3s; /* Smooth color transition on hover */
}
.menu a:hover {
    color: #f8de7f; /* Change color on hover */
}
header {
    width: 100%;
    margin: 0 auto; 
    text-align: left;
}
p {
    font-size: 17px;
    color: #4C4B4B;
    text-align: justify;
    text-justify: inter-word;
}
a {
    color: #2041AD;
}
.share {
    text-align: center;
}
.share a {
  text-decoration: none; /* Remove underline */
}
h1 {
    text-align: center;
    padding: 2%;
}
h2 {
    text-align: center;
}
.section-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 100px;
    background-color: #d6e0e5; /* Change the background color as needed */
}
.section-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 100px;
    background-color: white; /* Change the background color as needed */
}
.section-left .content {
    order: 1;
}
.section-left .image {
    order: 2;
}
.section-right .content {
    order: 2;
}
.section-right .image {
    order: 1;
}
/* Additional styles as needed for text, images, etc. */
.content {
    flex: 1;
    max-width: 50%;
    padding: 0 0 16px 0;
}
.image img {
    max-width: 100%;
    height: auto;
}
.section-left img,
.section-right img {
      border: 2px solid #0069b5;
  border-radius: 10px;
}
footer {
  line-height: 1.4;
  width: 100%;
}
.footer-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 100px;
  align-items: center;
  background-color: #282851; /* Change the background color as needed */
}
.footer-inner .image {
  max-width: 50%; /* Set the max-width for the "image" in PC */
}
.footer-inner .content {
  max-width: 40%; /* Set the max-width for the "content" in PC */
}
footer p {
    color: white;
    font-size: 16px;
}
footer a {
    color: white;
    text-decoration: none;
}
footer a:hover {
    color: #F8DE7F;
}
/* lists in sections */
.simplist  li,
.simplist  li {
    margin-left: 30px;
}

.tutor {
    background-color: #F8DE7F;
    padding: 30px;
}
.image-tutor {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Ensures images wrap on smaller screens */
    
}

.image-tutor img {
    margin: 4px;
    padding: 1px;
    border: solid grey 1px;
    border-radius: 25px;
    display: inline-block;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.7);
    transition: box-shadow 0.3s ease-in-out;
}

.image-tutor img:hover {
    box-shadow: none;
}
.member {
     float:right;
     margin: 2px;
     width: 100px;
       text-decoration: none;
}

.tutorpen {
    background-color: white;
    padding: 30px;
}
* {
  word-break: break-word;
}

.fontsp {
     font-size: 15px;
    text-align: center;
}

.book-item img {
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  transition: box-shadow 0.3s ease;
}

  .book-item img:hover {
    box-shadow: none;
  }

.clear:after {
  content: "";
  display: table;
  clear: both;
}
* {
  box-sizing: border-box;
}

  .blog-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.3s ease;
  }
  .blog-image:hover {
    box-shadow: none;
  }
  .blog-title {
    font-size: 1.1rem;
    margin: 1rem 0 0.5rem;
  }


div.redgallery {
  border: 1px solid #ccc;
    border-radius: 15px;
}

div.redgallery img{
      border: 1px solid #777;
  border-radius: 15px;
    opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.reddesc {
  padding: 15px;
  text-align: center;
  margin: 0 0 20px 0;
}

.redbubble {
  padding: 6px;
  float: left;
  width: 24.99999%;
}


.redgallery img {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.redgallery:hover img {
  transform: scale(1.05) rotate(2deg);
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
}


.btn-container {
  text-align: center; /* Centers the button */
  margin: 1px 60px 10px 60px; /* Adds some spacing */
}

.redbtn {
  position: relative;
  transform: none; /* Remove unnecessary centering transforms */
  left: auto;
  display: inline-block; /* Ensure the button doesn't stretch */
  background-color: #0062CC;
  font-size: 16px;
  color: white;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  text-align: center;
  font-family: 'Quicksand-SemiBold', sans-serif; 
}
.redbtn:hover {
    color: black;
  background-color: #F8DE7F;
}


.gridrawonline {
    background-color: #F8DE7F;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start; /* Ensures all items start at the top */
    gap: 80px;
}

.step {
    max-width: 200px;
    text-align: center;
     box-sizing: border-box;  /* Ensure borders are included in the width */
}

.step img {
    width: 100%;
    height: auto;
    border: solid #887c44 2px;
    border-radius: 15px;
}
.step h2 {
    color: #635A31; 
}




/* for alma emma slides to hide the must text */
.visually-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.testim {
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    background-color: white;
}
.testim h2 {
       padding: 0 0 30px 0;
}
.reviews {
    display: flex;
    justify-content: center;
    align-items: center;
}
.picture {
    margin: 0 50px; /* Adjust the spacing between images */
}
.whygridraw {
    background-color: white;
    align-items: center;
    text-align: justify;
    margin: 0 auto;
    padding: 5% 15% 5% 15%;
}
.software {
    border: 4px solid #282851;
    background-color: white;
    padding: 30px;
    margin: 10% 5% 1% 5%;
    border-radius: 25px;
}

.battle {
  padding: 1% 1% 5% 5%;
  float: right;
}
img[src="/images/correct-proportions-grid-draw.webp"] {
  border: none;
}
img[src="https://www.gridraw.net/es/imágenes/proporciones-correctas-dibujo-cuadrícula.webp"] {
  border: none;
}
img[src="https://www.gridraw.net/de/bilder/korrekte-proportionen-raster-zeichnung.webp"] {
  border: none;
}

a[href="https://apps.apple.com/us/app/grid-drawing-tool-for-artists/id1373800089"] img {
  border: none;
}
a[href="https://play.google.com/store/apps/details?id=com.jasminasusak.griddrawingtool"] img {
  border: none;
}
.empty-row {
    margin-bottom: 20px;
}
   /* gridder */
.container {
  max-width: 1000px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#downloadBtn {
    font-family: 'Quicksand-SemiBold', sans-serif;
    font-size: 22px;
}
h1 {
  text-align: center;
  margin-bottom: 20px;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 20px;
}

.file-input-container,
.button-container {
  width: 100%;
  margin-bottom: 10px;
  }

.input-group {
  display: flex;
  gap: 10px;
}

.color-thickness-group {
  flex: 1;
}

label {
  display: flex;
  align-items: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.file-label {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
  font-family: inherit;
}

.file-label:hover {
  background-color: #0056b3;
}

.file-name-display {
  display: block;
  margin-top: 8px;
  font-size: 0.9em;
  color: #555;
}
input[type="number"] {
  width: 70px;
  padding: 5px;
  box-sizing: border-box;
}

.input-group label {
  white-space: nowrap;
  flex-shrink: 0;
}
button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 100%;
}

button:hover {
  background-color: #0056b3;
}

canvas {
  max-width: 100%;
  display: block;
  margin: 0 auto;
  border: 1px solid #ccc;
}


.frame-comments {
    position: relative;
    overflow: auto;
    height: 780px; /* Adjust as needed */
        width: 100%;
}
.frame-container {
    position: relative;
    overflow: hidden;
    height: 780px; /* Adjust as needed */
        width: 100%;
}
.frame-container-vote {
    position: relative;
    overflow: hidden;
    height: 460px; /* Adjust as needed */
        width: 100%;
}

.frame {
    position: absolute;
    top: -200px; /* Adjust to hide desired top part */
    left: 0;
    width: 100%;
    height: 100%;
}
.frame-vote {
    position: absolute;
    top: -160px; /* Adjust to hide desired top part */
    left: 0;
    width: 100%;
    height: 100%;
}


/* jump to gridder */

.center-button{
display:flex;
justify-content:center;
align-items:center;
}

.my-button{
background-color:#0062CC;
margin:0 0 30px 0;
color:#fff;

font-family:'Quicksand-SemiBold',sans-serif;
font-size:22px;
padding:15px 25px;

border:none;
border-radius:8px;

cursor:pointer;
text-decoration:none;
display:inline-block;

/* same emboss shadow */

box-shadow:
3px 3px 6px rgba(0,0,0,0.45),
inset 0 2px 3px rgba(255,255,255,0.6),
inset 0 -3px 6px rgba(0,0,0,0.35);

transition:background-color .3s ease,color .3s ease;
}

.my-button img{
width:16px;
height:auto;
margin-right:10px;
}

.my-button:hover{
background-color:#F8DE7F;
color:#282851;
}

.my-button:active{
background-color:green;
}




/* download windows button */

.windows{
background-color:#0062CC;
margin:0 0 30px 0;
color:#fff;

font-family:'Quicksand-SemiBold',sans-serif;
font-size:22px;
padding:15px 25px;

border:none;
border-radius:5px;

cursor:pointer;
text-decoration:none;
display:inline-block;

/* emboss / depth */

box-shadow:
3px 3px 6px rgba(0,0,0,0.45),
inset 0 2px 3px rgba(255,255,255,0.6),
inset 0 -3px 6px rgba(0,0,0,0.35);

transition:background-color .3s ease,color .3s ease;
}

.windows img{
width:16px;
height:auto;
margin-right:10px;
}

.windows:hover{
background-color:#F8DE7F;
color:#282851;
}

.windows:active{
background-color:green;

box-shadow:
1px 1px 3px rgba(0,0,0,0.6),
inset 0 3px 6px rgba(0,0,0,0.4);
}

.windows img{
width:30px;
height:auto;
margin:-10px 16px -10px -10px;
}

img[src="https://www.gridraw.net/images/windows-icon.png"]{
border:none;
}


.macos{
background-color:#1793D1;
margin:0 0 30px 0;
color:#fff;

font-family:'Quicksand-SemiBold',sans-serif;
font-size:22px;
padding:15px 25px;

border:none;
border-radius:5px;

cursor:pointer;
text-decoration:none;
display:inline-block;

/* emboss / depth */

box-shadow:
3px 3px 6px rgba(0,0,0,0.45),
inset 0 2px 3px rgba(255,255,255,0.6),
inset 0 -3px 6px rgba(0,0,0,0.35);

transition:background-color .3s ease,color .3s ease;
}

.macos:hover{
background-color:#F8DE7F;
color:#282851;
}

.macos:active{
background-color:green;
box-shadow:
1px 1px 3px rgba(0,0,0,0.6),
inset 0 3px 6px rgba(0,0,0,0.4);
}




.floatright {
    float: right;
}
div.fontsp {
     font-size: 15px;
    text-align: center;
}
.img {
    margin: -5px 15px 15px 15px;
  padding: 5px 5px 5px 5px;
}
.fb {
    background: white;
}
#goto2 {
    text-decoration: none;
    list-style: none;
}
.medh:hover {
    border-radius: 25px;
    box-shadow: 0 0 20px rgba(255,255,255,.6);
}

.prvi {
background-image: url(https://www.gridraw.net/images/grid400alma2.webp); 
width: 400px;
height: 400px;
border: 4px solid #F0E5AB;
  border-radius: 3px;
box-shadow: 0 0 1px #999, -2px 2px 3px rgba(0,0,0,.2);
padding: 0;
margin: 1rem auto;
position: relative;
overflow: hidden;
}
.drugi {
background-image: url(https://www.gridraw.net/images/grid400alma1.webp); 
height: 400px;
resize: horizontal; 
position: absolute; 
top: 0; left: 0; 
min-width: 0;
max-width: 400px; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}
.drugi:before {
content: "";
font-size: 28px; 
color: black; 
box-shadow: 10px 0 15px -13px #000;
top: 0; right: 0;
height: 100%;
line-height: 400px;  
position: absolute; 
}
.slidy{  
resize: horizontal; 
opacity: 0; 
position: relative; 
top: 50%;
left: 0px; 
margin-right: 0px;  
width: 0px; height: 15px; 
max-width: 400px; min-width: 15px; 
outline: 0 solid transparent; 
cursor: move;
cursor: all-scroll;
transform: scaley(35);
transform-origin: center center;
animation: delta 5s 500 normal ease-in-out 1s;
}
@keyframes delta {
30% {width: 500px}
60% {width: 150px}
80% {width: 250px}
}

.prvi2 {
background-image: url(https://www.gridraw.net/images/grid400emma2.webp); 
width: 400px;
height: 400px;
border: 4px solid #F0E5AB;
  border-radius: 3px;
box-shadow: 0 0 1px #999, -2px 2px 3px rgba(0,0,0,.2);
padding: 0;
margin: 1rem auto;
position: relative;
overflow: hidden;
}
.drugi2 {
background-image: url(https://www.gridraw.net/images/grid400emma1.webp);
height: 400px;
resize: horizontal; 
position: absolute; 
top: 0; left: 0; 
min-width: 0;
max-width: 400px; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}
.drugi2:before {
content: "";
font-size: 28px; 
color: black; 
box-shadow: 10px 0 15px -13px #000;
top: 0; right: 0px;
height: 100%;
line-height: 400px;  
position: absolute; 
}
.slidy2{  
resize: horizontal; 
opacity: 0; 
position: relative; 
top: 50%;
left: 0px; 
margin-right: 0px;  
width: 0px; height: 15px; 
max-width: 400px; min-width: 15px; 
outline: 0 solid transparent; 
cursor: move;
cursor: all-scroll;
transform: scaley(35);
transform-origin: center center;
animation: delta 5s 500 normal ease-in-out 1s;
}
@keyframes delta {
30% {width: 500px}
60% {width: 150px}
80% {width: 250px}
}

#wowslider-container1 { 
	zoom: 1; 
	position: relative; 
	max-width:100%;
	margin:0px auto 0px;
	z-index:90;
	text-align:left; /* reset align=center */
	font-size: 10px;
}
#wowslider-container1 .ws_images ul{
	position:relative;
	width: 10000%; 
	height:auto;
	left:0;
	list-style:none;
	margin:0;
	padding:0;
	border-spacing:0;
	overflow: visible;
}
#wowslider-container1 .ws_images ul li{
	width:1%;
	line-height:0;
	float:left;
	font-size:0;
	padding:0 0 0 0 !important;
	margin:0 0 0 0 !important;
}
#wowslider-container1 .ws_images{
	position: relative;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:hidden;
}
#wowslider-container1 .ws_images a{
	width:100%;
	display:block;
	color:transparent;
}
#wowslider-container1 img{
	max-width: none !important;
}
#wowslider-container1 .ws_images img{
	width:100%;
	border:none 0;
	max-width: none;
	padding:0;
	margin:0;
}
#wowslider-container1 a{ 
	text-decoration: none; 
	outline: none; 
	border: none; 
}
#wowslider-container1  .ws_bullets { 
	font-size: 0px; 
	float: left;
	position:absolute;
	z-index:7;
}
#wowslider-container1  .ws_bullets div{
	position:relative;
	float:left;
}
#wowslider-container1  .wsl{
	display:none;
}
#wowslider-container1 sound, 
#wowslider-container1 object{
	position:absolute;
}

#wowslider-container1 .ws_photoItem {
	border: 2em solid #fff;
	margin-left: -2em;
	margin-top: -2em;
}
#wowslider-container1  .ws_bullets { 
	padding: 5px; 
}
#wowslider-container1 .ws_bullets a { 
	width:16px;
	height:16px;
	background: url(https://www.gridraw.net/images/bullet.png) left top;
	float: left; 
	text-indent: -4000px; 
	position:relative;
	margin-left:7px;
	color:transparent;
}
#wowslider-container1 .ws_bullets a:hover{
	background-position: 0 50%;	
}
#wowslider-container1 .ws_bullets a.ws_selbull{ 
	background-position: 0 100%;
}	
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
	background-size: 200%;
	position:absolute;
	display:none;
	top:50%;
	margin-top:-2.1em;
	z-index:60;
	width: 4.3em;	
	height: 4.3em;
	background-image: url(https://www.gridraw.net/images/arrows.png);
}
#wowslider-container1 a.ws_next{
	background-position: 100% 0;
	right:0.5em;
}
#wowslider-container1 a.ws_prev {
	left:0.5em;
	background-position: 0 0; 
}
#wowslider-container1 a.ws_next:hover{
	background-position: 100% 100%;
}
#wowslider-container1 a.ws_prev:hover {
	background-position: 0 100%; 
}
* html #wowslider-container1 a.ws_next,* html #wowslider-container1 a.ws_prev{display:block}
#wowslider-container1:hover a.ws_next, #wowslider-container1:hover a.ws_prev {display:block}
/* bottom center */
#wowslider-container1  .ws_bullets {
    bottom: 0px;
	left:50%;
}
#wowslider-container1  .ws_bullets div{
	left:-50%;
}
#wowslider-container1 .ws-title{
	position:absolute;
	display:block;
	bottom: 3em;
	left: 0;
	margin-right:1em;
	z-index: 50;
	color:#FFFFFF;	
	font-family:'Quicksand-SemiBold', sans-serif;
	line-height: 2.8em;
	font-weight: bold;
}
#wowslider-container1 .ws-title div,#wowslider-container1 .ws-title span{
	display:inline-block;
	background-color: #282851; /* color of upper flying text background*/
	border-radius:0 0.2em 0.2em 0;
	-moz-border-radius:0 0.2em 0.2em 0;
	-webkit-border-radius:0 0.2em 0.2em 0;
	opacity:0.9;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);	
}
#wowslider-container1 .ws-title div{
	display:block;
	margin-top:0.3em;
	font-size: 2.8em;  /* size of lower flying text */
	font-weight: normal;
	line-height: 1.15em;
	padding:0.6em;
	background:#FFFFFF;	
	color: blue; /* color of lower flying text */
	text-shadow:none;
}
#wowslider-container1 .ws-title span{
	padding:0.4em;
	font-size: 4.8em; /* size of upper flying text */
	line-height: 1.15em;
}
#wowslider-container1 .ws_images > ul{
	animation: wsBasic 31.2s infinite;
	-moz-animation: wsBasic 31.2s infinite;
	-webkit-animation: wsBasic 31.2s infinite;
}
@keyframes wsBasic{0%{left:-0%} 11.54%{left:-0%} 16.67%{left:-100%} 28.21%{left:-100%} 33.33%{left:-200%} 44.87%{left:-200%} 50%{left:-300%} 61.54%{left:-300%} 66.67%{left:-400%} 78.21%{left:-400%} 83.33%{left:-500%} 94.87%{left:-500%} }
@-moz-keyframes wsBasic{0%{left:-0%} 11.54%{left:-0%} 16.67%{left:-100%} 28.21%{left:-100%} 33.33%{left:-200%} 44.87%{left:-200%} 50%{left:-300%} 61.54%{left:-300%} 66.67%{left:-400%} 78.21%{left:-400%} 83.33%{left:-500%} 94.87%{left:-500%} }
@-webkit-keyframes wsBasic{0%{left:-0%} 11.54%{left:-0%} 16.67%{left:-100%} 28.21%{left:-100%} 33.33%{left:-200%} 44.87%{left:-200%} 50%{left:-300%} 61.54%{left:-300%} 66.67%{left:-400%} 78.21%{left:-400%} 83.33%{left:-500%} 94.87%{left:-500%} }
#wowslider-container1 .ws_bullets  a img{
	text-indent:0;
	display:block;
	bottom:20px;
	left:-120px;
	visibility:hidden;
	position:absolute;
    border: 4px solid rgba(220, 220, 220, 0.6);
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	max-width:none;
}
#wowslider-container1 .ws_bullets a:hover img{
	visibility:visible;
}
#wowslider-container1  .ws_bullets .ws_bulframe{
	display:none;
	bottom:21px;
	overflow:visible;
	position:absolute;
	cursor:pointer;
    border: 4px solid rgba(220, 220, 220, 0.6);
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
}

@media (max-width: 1240px) {
    .section-left {
    padding: 40px;
}
.section-right {
    padding: 40px;
}
.btn-container {
  text-align: center; /* Centers the button */
  margin: 1px 30px 10px 30px; /* Adds some spacing */
}
}

@media (max-width: 1150px) {
.section-left,
.section-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
}
.section-left .content,
.section-right .content {
    order: 1;
    max-width: 100%; /* Set a specific max-width value */
}
.section-left .image,
.section-right .image {
    order: 2;
}
.simplist {
  text-align: left; /* Reset the text alignment to left */
}
 .footer-inner {
    flex-direction: column-reverse; /* Reverse the order for mobile devices */
    align-items: center;
    padding: 40px;
  }
.footer-inner .image {
    max-width: 100%; /* Set the max-width for the "image" in tablets */
}
.footer-inner .content {
    max-width: 100%; /* Set the max-width for the "content" in tablets */
}
img { /*ovo je resilo presiroke slike*/
  width: auto ;
  max-width: 100% ;
  height: auto ;
}
video { /*ovo je resilo presiroke slike*/
  width: auto ;
  max-width: 100% ;
  height: auto ;
} 
.gallerypc1 {
display: none;
}
.gallerypc {
display: none;
}
.nomob {
    display: none;
}
.logo {
    width: 8%;
}
.frame {
    position: relative;
    top: -100px; /* Adjust to hide desired top part */
    height: 780px; /* Allow the iframe to take full height */
    width: 500px;
}
}

/* For tablets */
@media (max-width: 1024px) {
html, body {
overflow-x:hidden;
}
p {
    font-size: 20px;
}
footer a {
    font-size: 22px;
}
footer p {
    font-size: 22px;
}
.whygridraw {
    padding: 5%;
}
.picture {
    margin: 0 20px; /* Adjust the spacing between images */
}

#wowslider-container1 .ws-title div{
	font-size: 3.8em;  /* size of lower flying text */
}
#wowslider-container1 .ws-title span{
	font-size: 5.8em; /* size of upper flying text */
}
ol li {
      font-size: 20px;
}
.float-left { /* mobile only apps list */
 text-align: left;
 font-size: 20px;
 margin-left: 5%;
}
    .image-tutor {
        flex-wrap: nowrap; /* Prevent wrapping on tablets */
        width: 100%;
            gap: 20px; /* Adds space between the images */
    }
   .image-tutor img {
         border-radius: 10px;
        width: 100%; /* Make images take up the full width */
        max-width: 300px; /* Limit the width so it doesn't stretch too much */
    }
        .step {
            max-width: 300px;
            text-align: center;
        }
}



@media only screen and (max-width: 768px) {
.btn-container {
  text-align: center; /* Centers the button */
  margin: 1px 10px 10px 10px; /* Adds some spacing */
}
}



/*razlika izmedju mob i desktop*/
@media only screen and (max-width: 601px) {
.section-left,
.section-right {
    padding: 20px;
}  
.logo {
    padding-left: 10px;
    padding-right: 10px; 
}
.menu a {
     font-size: 20px;
}
.menu li {
    margin-right: 18px; /* Add spacing between menu items */
}
article {
    display: block;
    text-align: center; /* Center-align the content */
    padding: 50px 0; /* Adjust padding as needed */
}
.reviews {
    /* Reset display to block for stacking */
    display: block;
}
.picture {
    margin: 20px auto; /* Center-align and add spacing between stacked images */
}
.frame {
    width:100%;
}
.software {
    padding: 30px;
    margin: 2%;
}
.controls {
    flex-direction: column;
}
.color-thickness-group {
    flex-direction: column;
}
.input-group {
    width: 100%;
}
ol {
    padding-left: 1.5em; /* Adjust this value to your preference */
    margin-left: 0; /* Remove the default margin */
}
ol li {
    margin-left: -0.5em; /* Counteract the default margin on list items */
}
#contactForm {
    margin: 1%;
    padding: 5px 30px 5px 10px;
}
   .image-tutor {
        flex-direction: column; /* Stack images vertically on mobile */
        align-items: center; /* Center images in the container */
    }
    .image-tutor img {
        width: 100%; /* Make images take up the full width */
        max-width: 300px; /* Limit the width so it doesn't stretch too much */
    }
.step img {
    width: 100%;
    height: auto;
    border: 2px solid #887c44;
    border-radius: 15px;
    -webkit-mask-image: -webkit-radial-gradient(center, white, black); /* Safari mask fix */
}
.input-group {
    width: 100%;
    flex-wrap: wrap;
}
.input-group label {
    flex: 1 1 100%;
    justify-content: left;
}
}    

@media only screen and (max-width: 510px) {
.menu li {
    margin-right: 12px; /* Add spacing between menu items */
}
}    

@media only screen and (max-width: 440px) {
.prvi {
background-image: url(https://www.gridraw.net/images/grid300alma2.webp); 
width: 300px;
height: 300px;
}
.drugi {
background-image: url(https://www.gridraw.net/images/grid300alma1.webp); 
height: 300px;
max-width: 300px; 
}
.drugi:before {
line-height: 300px;  
}
.prvi2 {
background-image: url(https://www.gridraw.net/images/grid300emma2.webp); 
width: 300px;
height: 300px;
}
.drugi2 {
background-image: url(https://www.gridraw.net/images/grid300emma1.webp);
height: 300px;
max-width: 300px; 
}
.drugi2:before {
line-height: 300px;  
}
footer p {
margin:2%;
}
#wowslider-container1 .ws-title div{
	font-size: 2.6em;  /* size of lower flying text */
}
#wowslider-container1 .ws-title span{
	font-size: 3.8em; /* size of upper flying text */
}
h1 {
    font-size: 20px;
}
.my-button {
    font-size: 18px;
}
.menu li {
    margin-right: 8px; /* Add spacing between menu items */
}
.logo {
    font-size: 24px; /* Font size for the logo */
    padding-left: 2px;
}
footer a {
    font-size: 20px;
}
footer p {
    font-size: 20px;
}
}

/* my iPhone and samsung edge use */
@media only screen and (max-width: 415px) {
.menu a {
     font-size: 16px;
}
}

@media only screen and (max-width: 360px) {
.my-button {
    font-size: 16px;
}
.menu a {
     font-size: 14px;
}
}