body{
    background-color: #48593F;
    font-size: 16px;
    font-family: Monotype Corsiva;
}
p{
    font-size: 180%;
}
h1{
    font-size: 280%;
}

h2{
    font-size: 170%;
}
.navc{
    padding-top: 2%;
    
}
.navbar{
    width: 60%;
    border-bottom: black;
    border-bottom-style: solid;
    border-top: black;
    border-top-style: solid;
    border-width: 2px;  
    text-align: center;
}
.navbar-light .navbar-nav .nav-link {
    color: white; 
}
.navbar-light .navbar-nav .active .nav-link{
    color: yellow;
}
.navbar-light .navbar-nav :hover .nav-link{
    color: yellow;
}
a.nav-link{
    
    
    font-size: 1.6em;
    background-color: #48593F;     
}
.dropdown-menu{
    background-color: #48593F;    
   
}
a.dropdown-item{
    color: white;
}
a.dropdown-item:hover{
    background-color: yellow;
}

.steam img{
    margin: 0% 0%;
    width: 30%;
    padding-bottom: 7%;
}

.discord img{
    margin:  0% 0%;
    width: 35%;
    padding-bottom: 5%;
}
.site-footer
{
  background-color:#26272b;
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color:#737373;
}
.site-footer hr
{
  border-top-color:#bbb;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer h6
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:yellow;
  text-decoration:none;
}
.footer-links
{
text-align: center;
  padding-left:0;
  list-style:none
}
.footer-links li
{
    font-size: 140%;
  display:block
}
.footer-links a
{

  color:#737373
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:yellow;
  text-decoration:none;
}
.footer-links.inline li
{
  display:inline-block
}
.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
font-size: 120%;
  margin:0
}
@media (max-width:991px)
{
  .site-footer [class^=col-]
  {
    margin-bottom:30px
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-icons
  {
    text-align:center
  }
}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none;
  padding-bottom: 10%;
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.facebook:hover
{
  background-color:#3b5998
}
.social-icons a.discord:hover
{
  background-color:#5F70BE
}
.social-icons a.steam:hover
{
  background-color:#0E2E47
}
.social-icons img{
    width: 100%;
}
@media (max-width:767px)
{
  .social-icons li.title
  {
    display:block;
    margin-right:0;
    font-weight:600
  }
}


.footerabout img{
margin-top: -3%;
width: 60%;
height: 100%;

}


#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#44c8f5;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:5px;
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff
}
#scroll:hover {
    background-color:lightskyblue;
    opacity:1;
    filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}





.introtitel{
    padding-top: 10%;
    color: white;
    text-align: center;
}
.introimg{
    background-image: url(ref/banner.jpg);
    max-width: 100%;
    background-size: 100% 100%;
}
.uk1{  
margin: 0% 8%;
width: 30%;  
}
.uk1 img{
margin: 10% 20%;
width: 40%;
}
.logo{
    margin: -18% 20%;  
}
.logo img{
    
    width: 70%;
    padding-bottom: 5%;
}

.uk2{
    margin: -29% 64%;
    width: 25%;
}
.uk2 img{
    margin: 15% 0%;
    width: 50%;
}
.introtext{
    color: white;
    width: 68%;
    margin: 10% 19%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 28%;
    padding-bottom: 5%;
}
.about{
    width: 45%;
    color: white;
    padding-bottom: 20%;
    background-image:   url(ref/93rdsoldier.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}


.about h1{
text-align: center;
color: yellow;
font-size: 3VW;
padding-bottom: 5%;

}
.about p{
    font-size: 1.5VW;
}


/* ---------------------------------------------medals page---------------------------------------- */
.bgsmedals{
    margin-top: 5%;
    background-image: url(ref/servicemedalbg.JPG);
    max-width: 1920px;
    
}
.smedals{
    padding-top: 5%;
    color: white;
    
    
}
.smedals h1{
    color: yellow;
    
}
/* if you wanna see the size of collom put the background-color back on */
/* .row .col { 
    
    background-color: khaki;
}  */


/* height of the service medal background: */
.servicemedals{ 
    height: 14VW;
}

/* width of the servicemedals and links in it */
.servicemedals img {
    width: 2.5VW;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    overflow: hidden;
    font-size: 150%;
  }


#imgmedal{
    width:  36.45VW;
    height: 36.45VW;
    
}

/* Modal Content (Image) */
.modal-content {
    background: none;
    margin: auto;
    display: block;
    width: 200%;
    
  }


#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 30px 0;
    height: 150px;
  }

  /* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
  }

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}
/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
  
/* this medal was somehow disobient */
.diamondmedal img{
    width: 3.4VW;
    margin-left: -2%;
    
}
.Glasgowsmile img{
    width: 7.9VW;
    height: 8VW;
    margin-left: -2%;
    margin-top: 40%;
}
.coldhearted img{
    width: 7.9VW;
    height: 8VW;
    margin-left: -2%;
    margin-top: 40%;
}
.immortalhighlander img{
    width: 7.9VW;
    height: 8VW;
    margin-left: -2%;
    margin-top: 25%;
}
.navalmarksman img{
    width: 7.9VW;
    height: 8VW;
    margin-left: -2%;
    margin-top: 25%;
}
.borderguard img{
    width: 7.9VW;
    height: 8VW;
    margin-left: -2%;
    margin-top: 25%;
}
.headhunter img{
    width: 7.9VW;
    height: 8VW;
    margin-left: -2%;
    margin-top: 25%;
}
.lastmanstanding img{
    width: 7.9VW;
    height: 8VW;
    margin-left: -2%;
    margin-top: 20%;
}
.JohnPaulJones img{
    width: 6VW;
    height: 8VW;
    margin-left: 0%;
    margin-top: 20%;
}
.Nelson_Finest img{
    width: 6VW;
    height: 8VW;
    margin-left: 6%;
    margin-top: 20%;
}
.sniper img{
    width: 7.9VW;
    height: 8VW;
    margin-left: -2%;
    margin-top: 40%;
}
.demolitionman img{
    width: 7.9VW;
    height: 8VW;
    margin-left: -2%;
    margin-top: 35%;
}
.zaragoza img{
    width: 5VW;
    height: 7VW;
    margin-left: -2%;
    margin-top: 40%;
}
.hammertime img{
    width: 7.9VW;
    height: 8VW;
    margin-left: -2%;
    margin-top: 35%;
}
.rocketman img{
    width: 7.9VW;
    height: 8VW;
    margin-left: 2%;
    margin-top: 35%;
}
/* each medal class in medals page needs the same code, add the name of that class to it */
.bronzemedal, .silvermedal, .goldmedal, .platinummedal, .diamondmedal, .medaloh, .georgecross, .exemplarys, .mcormack, .mlbmedal, .immortalpeng,
.ensignewart, .marketeermedal, .quikdraw , .saboteur, .medalcannon, .closequarter, .sharpeeagle, .Glasgowsmile, .coldhearted, .immortalhighlander,.navalmarksman,
.borderguard, .headhunter, .lastmanstanding,.sniper,.demolitionman,.zaragoza,.hammertime,.rocketman,.JohnPaulJones,.Nelson_Finest 
{
    cursor: pointer;
    background-image: url(ref/board.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.medaltext{ 
    margin-top: -10%;
}

.medaltext h1{
    color: yellow;
    font-size: 1.4VW;
}
.medaltext p{
    font-size: 1.2VW;
    color: white;
}

.highhonours{
    height: max-content;
    padding-top: 2%;
    padding-bottom: 5%;
    max-width: 1920px;
    background-image: url(ref/highhonoursbg.JPG);
}
.highhonours h1{
    color: yellow;
}
.medaltext2 h1{

    color: yellow;
    font-size: 1.4vw;
    
}
.medaltext2 p{
    font-size: 1.2VW;
    color: white;
    
}
.medaltext2{
    text-align:center;
}

.cohonours{
    height: max-content;
    padding-top: 2%;
    padding-bottom: 5%;
    max-width: 1920px;
    background-color: #385539;
}

.cohonours h1{
    color: yellow;
}
.mlbmedal img{
    width: 6VW;
    
}

.ensignewart img{
    width: 2.8VW;
    margin-left: -5%;
}
.immortalpeng img{
    width: 5VW;
    
}
.medaltext3 h1{
    color: yellow;
    font-size: 1.4VW;
}
.medaltext3 p{
    font-size: 1.1VW;
    color: white;
}
.colribbon{
    height: 15VW;
}
.ribbons{
    height: 14VW; 
    
}

.ribbons img{
    width: 5VW;
    
}

.silverlining, .kingsthree, .stoodled, .guardsman, .marksman ,.icon, .quartermaster, .elf, .cannonsniper
{
    cursor: pointer;
    background-image: url(ref/board2.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.stoodled img{
    width: 4.5VW;
    margin: -20% -35%;
}

.medaltext4 h1{
    color: yellow;
    font-size: 1.4vw;
}
.medaltext4 p{
    font-size: 1.1VW;
    color: white;
}

.quikdraw img {
    width: 4VW;
}
.saboteur img{
    width: 3VW;
    margin-left: 5%;
}
.companyhonour {
    padding-top: 5%;
    background-image: url(ref/companiehonourbg.JPG);
    max-width: 1920px;
    padding-bottom: 10%;

}
.cohonours{
    background-image: url(ref/companyhonourbg.JPG);
}

.companyhonour h1{
    color: yellow;
}

.medalcannon img{
    width: 3.3VW;
}
.sharpeeagle img{
    width: 2.3VW;
}


/* ---------------------------------------------Roster page---------------------------------------- */
.unitc{
    width: 20VW;
}
img.companymedal {
margin-top: 0vw;
width: 5VW;
}
.officercorps{
    background-color: #777247;
    height: max-content;
    margin-top: 5%;
    max-width: 1920px;
    padding-bottom: 5%;
}
.rostertitle h1{
    text-align: center;
    color: yellow;
}
.rostertitle{
    padding-bottom: 1%;
    padding-top: 2%;
}
.officers{
height: 20VW;
position: relative;
}
.officername h1{
text-align: center;
color: white;
font-size: 170%;
}
.nconame h1{
text-align: center;
color: white;
font-size: 1.5VW;

}
.nconame h1 img{
    width: 3VW;
    
}

.col.name{
    width: 70VW;
}
.name img{
    width: 3VW;
}

.portret
{
  
    background-image: url(ref/board3.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18VW;
  
}
.portret2
{
    position:relative;
    padding: 5%;
    background-image: url(ref/board3nco.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18VW;
    height: 20VW;
    width:8VW;

}


.portret img{
    
    width:  20VW;
    height: 20VW;
    /* margin-top: -5%;
    margin-left: -55%; */
    
    
}
.portret2 img{
    
    width:  20VW;
    height: 20VW;
    margin-top: -5%;
    margin-left: -55%;
    
    
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    width: 17VW;
    height: 20VW;
    display: grid;
    
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    display: grid;
  grid-template: 1fr / 1fr;
  grid-template-areas: "frontAndBack";
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
   
    transform: rotateY(180deg);
  }
  
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    grid-area: frontAndBack;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    color: black;
  }
  
  /* Style the back side */
  .flip-card-back {
    background-image: url(ref/board3back.svg);
    
    transform: rotateY(180deg);
    background-repeat: no-repeat;
    
  }

.stoody img{
    width: 38vw;
    margin: 0% -22VW;
    margin-left: -24VW;
    
    
}
.apha img{
    
    height: 17VW;
    width: 35vw;
    margin: 17% -18VW;
    
}
.seldanas{
    margin-left: -7VW;
}
.seldanas img{
    width: 35vw;
    height: 20VW;
    margin-left: -9.5VW;
    margin-top: -0.2VW;
}
.sabotage{
    margin-left: -18VW;
}
.sabotage img{
    
    width: 20vw;
    height: 20VW;
    margin-left: -2.5VW;
    margin-top: 0VW;
}
.ncos{
    padding-bottom: 5%;
    background-color: #2B3032;
    max-width: 1920px;
}
.rifles{
    padding-bottom: 5%;
    background-color: #385539;
    max-width: 1920px;
}
.brian{
    margin: 0% -17%;
   
    
}
.brian img{
    
    width: 35VW;
    margin: 0% -117% ;
    margin-left: -21VW;
}
.riflesrole{
    margin: 0% -12%;
}

.xelil{
    margin: 0% -3VW;
}

.xelil img{
    margin: 0% -19VW;
    width: 35VW;
    margin-left: -20VW;
}
.epousek{
    
    margin: 0% 2VW;
}
.epousek img{
    margin: 0% -18VW;
    width: 35VW;
    margin-left: -19VW;
}
.carpophorus{
    margin: 0% -2VW;
}
.carpophorus img{
    margin: 0% -18VW;
    width: 35VW;
    margin-left: -19VW;
}
.blackprince{
    margin: 0% -3VW;
}

.blackprince img{
    margin: -6% -18VW;
    width: 35VW;
    margin-left: -19VW;
    
}


.macadder{
    
    margin-left: -5VW;
}

.macadder img{
    margin: 5% -18VW;
    height: 95%;
    width: 40VW;
    margin-left: -19VW;
}
.craig{
    margin-left: -3VW;
}
.craig img{
    
    width: 38VW;
    margin: -5% -85% ;
    margin-left: -11.5VW;
}

.darx img{
    height: auto;
    width: 35VW;
    margin: 14% -19VW;
    margin-left: -20VW;
}
.darx{
   
    margin-left: -5VW;
}

.candy{
    margin: 0% -2%;
    margin-left: 0VW;
}

.candy img{
    height: 18VW;
    width: 35VW;
    margin: 11% -19VW;
    margin-left: -20VW;
}
.latvian{
    margin-left: 0VW;
}
.latvian img{
    height: auto;
    width: 20VW;
    margin: 16% -19VW;
    margin-left: -20VW;
}
.mre{
    margin-left: -4.4VW;
}
.mre img{
    width: 45VW;
    height: 18VW;
    margin: 11% -18VW;
    margin-left: -19VW;
}
.caze{
    margin-left: -10VW;
}
.caze img{
    width: 40VW;
    height: 18VW;
    margin: 11% -18VW;
    margin-left: -19VW;
}

.arty{
    background-color: #096A9E;
    padding-bottom: 5%;
    max-width: 1920px;
}
.line{
    background-color: #555F63;
    padding-bottom: 10%;
    max-width: 1920px;
}

.vonix{
    margin: 0% -2VW;
}
.vonix img{
    margin: 0% 1.5VW;
    
}
.jasper{
    
    margin: 0% -2VW;
}
.jasper img{
    width: 40vw;
    margin: 0% -11VW;
    
}


.ketchup{
  margin: 0%  -20VW;
  margin-left: -120%;
}
.ketchup img{
    width: 32VW;
    height: 15VW;
    margin: 29% -16VW;
}
.sam img{
    width: 25VW;
    height: 17VW;
    margin: 20% -13VW;
    margin-left: -13.5VW;
}
.sam{
    margin-left: 8%;
}

.tarmech img{
    width: 40VW;
    margin: 0% -16VW;
    margin-left: -14VW;
}

.infantry img{
    margin-left: -35%;
}
.beans{
    
    margin-left: -2VW;
}
.beans img{
    width: 40vw;
    margin-left: -65%;
}
.karl{
    margin-left: -18.5VW;
}
.karl img{
    width: 9VW;
    height: 13VW;
    margin-top: 41%;
    margin-left: 0VW;
}
.maks{
    margin-left: -13.5VW;
}
.maks img{
    width: 18VW;
    margin-left: 3VW;
}
.johnny{
    margin-left: 0.5vw;
}
.johnny img{
    width: 40vw;
    margin-left: -12.5VW;
}
.selta{
    margin-left: -62%;
}
.selta img{
    width: 40VW;
    margin-left: -11VW;
}
.scubydo{
    margin-left: -40%;
}
.scubydo img{
    margin-left: 10%;
}
.valio{
    margin-left: -56%;
}
.valio img{
    margin-left: -60%;
	width: 40VW;
}


.medal1 img, .medal2 img, .medal3 img{
    cursor: pointer;
    padding-top: 10%;
    width:  6VW;
    height: 6VW;
    margin: 0% 0%;
    margin-left: -12%;
    
}
.medalcol1{
    line-height: 0.5VW;
}
.medalcol1 img{
    max-width: 100%;
    cursor: pointer;
    padding-top: 10%;
    width:  5VW;
    height: 5VW;
    margin: 0% 0%;
    margin-left: 0VW;
    
}
.medalcol2{
    line-height: 0.5VW;
}
.medalcol2 img{
    max-width: 100%;
    cursor: pointer;
    padding-top: 10%;
    width:  5VW;
    height: 5VW;
    margin: 0% 0%;
    margin-left: -6VW;
    
}
.medalbottom{
    line-height: 0.5VW;
}
.medalbottom img{
    cursor: pointer;
    max-width: 100%;
    width:  5VW;
    height: 5VW;
    margin: 0% 0%;
    margin-left: -2.5VW;
}

.medalcol1-4medals{
    line-height: 0.5VW;
}
.medalcol1-4medals img{
    max-width: 100%;
    cursor: pointer;
    padding-top: 10%;
    width:  4VW;
    height: 4VW;
    margin: 0% 0%;
    margin-left: 0VW;
}
.medalcol2-4medals{
    line-height: 0.5VW;
}
.medalcol2-4medals img{
    max-width: 100%;
    cursor: pointer;
    padding-top: 10%;
    width:  4VW;
    height: 4VW;
    margin: 0% 0%;
    margin-left: -8VW;
}

.medalcol1-5medals{
    line-height: 0.5VW;
}
.medalcol1-5medals img{
    max-width: 100%;
    cursor: pointer;
    padding-top: 10%;
    width:  3VW;
    height: 3VW;
    margin: 0% 0%;
    margin-left: 0VW;
}
.medalcol2-5medals{
    line-height: 0.5VW;
}
.medalcol2-5medals img{
    max-width: 100%;
    cursor: pointer;
    padding-top: 10%;
    width:  3VW;
    height: 3VW;
    margin: 0% 0%;
    margin-left: -8VW;
}


/* -----------------------------Enlist page---------------------- */
#form_container
{
	padding:0.78VW 0.78VW;
    margin-top:0.78VW;
    background-image: url(ref/enlistbanner.jpg);
    background-repeat: no-repeat;
    
    opacity: 95%;
    background-size: cover;
    
}
#contact-form{
    
    margin-top: 1%;
    color: white;
    
    
}

.form-control{
    opacity: 70%;
}
.introtitel{
    margin-top: -5%;
    font-size: 100%;
}
.introtitel a{
    color: lightgray;

}
.introtitel a:hover{
    color: yellow;
}
.btnenlist{
    opacity: 90%;
    margin-top: 8%;
    width: 30%;
    background-color: #276274;
    font-size: 130%;
}
.btnenlist:hover{
    
    width: 30%;
    background-color: yellow;
    font-size: 130%;
    color: black;
}
.containerenlist{
    padding-bottom: 10%;
}
p.if {
    font-size: 100%;
    color: black;
    opacity: 100%;
    text-align: center;
    font-weight: bolder;

}
/* ---------------------------------------------- Gallery ------------------------------------- */
.carousel-item {
    padding-top: 2%;
    height: 40VW;
    
   
   
  }
  .carousel-item img {
    width: 100%;
    height: 110%;
    
   
  }
  .h1gallery h1{
      padding-top: 5%;
      text-align: center;
      color: white;
      text-decoration-line: underline;
  }

  .container-fluid {
    background: #000000;
  color:#ffffff;
    margin: 40px auto 10px;
    padding: 20px 0px;
    
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.carrousel2{
    margin-left: auto;
    margin-right: auto;
    width: 70VW;
    height: 100%;
    padding-bottom: 25%;
}
.videocontainer{
    width: 97VW;
    height: 60%;
    background: none;
    
}
.h2gallery h2{
    text-align: center;
    font-size: 250%;
    text-decoration-line: underline;
}