.shutterBox
{
    width: 96%;
    height: 600px;
    border: 1px solid grey;
    margin-bottom: 2%;
    border-radius: 3px;
    margin-left: 2%;
    background-color: grey;
}
.Shutterdiv
{
margin-top: 5.5%;
margin-bottom: 3%;

}
.carouseldiv
{
    width:62%;
    margin-left: 20%;  
}
.tab-Shutter
{
margin-top: 2%;
cursor: pointer;
border: none;
width:96%;
margin-left: 2%;

}
.arrowsright
{
    color: rgb(243, 243, 190);
    font-size: 50px;
    margin-right: -20px;
   
}
/* .arrowsize
{
    width:100px;
    height: 60px;
    margin-left: -40px;
}
.arrowsize1
{
    margin-right: -119px;
width: 168px;
height: 70px !important;
} */
.arrowsleft
{
    color: rgb(243, 243, 190);
    font-size: 50px;
    margin-left: -20px;
  
}
.swiper-slide:hover
{
    cursor: pointer;
}
.shutter-tab
{
width:20%;
float: left;
border: 1px solid lightgray;
padding: 10px;
text-align: center;
font-size: 18px;
font-weight: bold;
border-radius: 4px;
font-family: Roboto, Sans-serif;
}
.active
{
background-color: orange;
color:white
}
.mainImage
{
width:1000px;
height: auto;
margin-top: 2%;
margin-left: 15%;
margin-bottom: 3%;
border: 5px solid orange;
border-radius: 5px;
}
.imageSource2
{
border: 1px solid #2A466A !important;
border-radius: 3px !important;
background-color: white !important;
}
.imageSource1
{
border: 1px solid #2A466A !important;
border-radius: 3px !important;
background-color: white !important;
}
.imagesize
{
width:700px !important;
margin-top: 2%;
margin-left: 25% !important;
height: 400px !important;
border: 10px solid rgb(243, 243, 190) !important;
border-radius: 5px !important;
}
.imagesize2
{

background-color: white !important;
border: 5px solid rgb(243, 243, 190) !important;
}



@media(min-width: 300px) and (max-width: 600px)
{
.shutterBox
{
width: 100%;
height: 520px;
border: 1px solid lightgray;
float:left;
}

.shutter-tab
{
width:50%;
float: left;
border: 1px solid lightgray;
padding: 10px;
text-align: center;
font-size: 15px;
font-weight: bold;
border-radius: 4px;
font-family: Roboto, Sans-serif;
}
.mainImage
{
width:330px;
height: auto;
margin-top: 12%;
margin-left: 0%;
margin-bottom: 3%;
border: 5px solid orange;
border-radius: 5px;
}
.imagesize
{
width: 320px !important;
border: 5px solid rgb(243, 243, 190) !important;
height: 300px !important;
margin-left: 5% !important;
}
.arrowsright
{
    color: rgb(243, 243, 190);
    font-size: 50px;
    margin-right: -20px;
   
}
.arrowsleft
{
    color: rgb(243, 243, 190);
    font-size: 50px;
    margin-left: -45px;
  
}
.imageSource1
{
width:220px !important;
}
.imageSource2
{
width:220px !important;
}
.imagesize2
{

margin-left: 10% !important;
background-color: white !important;
border: 5px solid rgb(243, 243, 190) !important;
}
.carouseldiv
{
    width:100%;
    margin-left: 0%;
    height: 50px !important;
    
}
}
@media (min-width:800px) and (max-width:1200px)
{
.shutterBox
{
width: 96%;
height: 560px;
border: 1px solid lightgray;
float:left;
}
.carouseldiv
{
    width:62%;
    margin-left: 18%;
    
    
}
.shutter-tab
{
width:50%;
float: left;
border: 1px solid lightgray;
padding: 10px;
text-align: center;
font-size: 15px;
font-weight: bold;
border-radius: 4px;
font-family: Roboto, Sans-serif;
}
.mainImage
{
width:700px;
height: auto;
margin-top: 8%;
margin-left: 0%;
margin-bottom: 3%;
border: 5px solid orange;
border-radius: 5px;
}
.imagesize
{
width:600px !important;
height: 300px !important;
margin-left: 12% !important;
}
.imagesize2
{
width:200px !important;
margin-left: 25%;
background-color: white !important;
border: 5px solid rgb(243, 243, 190) !important;
}
}