@import url(//fonts.googleapis.com/css?family=Raleway:400,600);

*{
    margin: 0;
    padding: 0;
}
 #arrowLeft , #arrowRight
    {
        display:none;
    }
body{
    width: 100%;
    height: 100%;
    font-family: 'Raleway', sans-serif;
    overflow-x:hidden; 
}

a:focus {

  outline: none;

}

#mainNav a:focus  {

  outline: none;
  border: 1px dashed #ffb347;

}
.skipLink {

  position: fixed;
  width: 180px;
  color: #ffb347;
  left: -180px;
  top:0;
  z-index: 30000;

}

.skipLink:focus {

  left: 0;
  outline: none;
  border: 1px dashed #ffb347;
}

#bgImgHolder{

     position:fixed;
     height:100vh;
     width:100%;
     overflow:hidden;
     z-index: -1;
       background-image: url('../images/bg.jpg');
    background-size:100%;
    background-size: cover;
    background-repeat:no-repeat;
    background-position: center 20px; 
    -webkit-background-size:100% 100%;
    -webkit-background-size: cover;
    -moz-background-size:100%;
    -moz-background-size: cover;

}
#bgImgHolder img{ 

    position:absolute;
    top:0;
    width:100%;
    height:120%;
    left:0;
}
 #social
 {
    width: 300px;
    height: 100px;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -150px;
 }
  #social img
  {
    width: 90px;
 
    display: block;
    float: left;
    margin: 5px;

  }

  #downArrow
  {
    position: absolute;
    bottom: 20px;
    width:80px;
    height: 80px;
    left: 50%;
    margin-left: -40px;
    -webkit-animation:downmove ease-in-out 2s infinite;
    cursor: pointer;
  }
  #downArrow #dsup{
    width: 45px;
    position:absolute;
    top: 3px;
    left: 18px;
     -webkit-animation:smalldownmove ease-in-out 2s infinite;
   }
   #downArrow #dsdown{
    width: 80px;
    position:absolute;
   }
h4
{
    font-size: 48px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 2px;
    margin: 0 auto;
    -webkit-transition: font-size 0.3s , background 0s;
    -moz-transition: font-size 0.3s , background 0s;
    -webkit-transition: font-size 0.3s , background 0s;
    height: 48px;
}

.fixedhead {

    position: fixed;
    top:0;
    left:50%;
    margin-left: -110px;
    z-index: 200;
    background: rgba(43, 85, 127, 0.9);
    font-size: 36px;
     width:220px;
     -webkit-transform: translate3d(0,0,0);
   }
#contact h4 {

    margin-top:-10px;
    margin-bottom: 30px;
}
#contact .fixedhead {

      width: 90%;
      max-width: 600px;
    left:0;
    right: 0;
    margin: 0 auto;
    z-index: 200;
    background: rgba(43, 85, 127, 0.9);
    font-size: 40px;
}

.fixedhead:before {

    position: absolute;
    display: block;
    content: '';
    top: 0px;
    border-color:  transparent rgba(43, 85, 127, 0.9) transparent transparent ;
    border-width: 25px 25px 28px 0;
    border-style: solid;
    height: 0;
    width: 0;
    left: -25px;
}

.fixedhead:after {

    position: absolute;
    display: block;
    top: 0px;
     content: '';
    border-color:  transparent transparent transparent rgba(43, 85, 127, 0.9);
    border-width:25px 0 28px 25px ;
    border-style: solid;
    height: 0;
    width: 0;
    right: -25px;
}

.fixedhead span {

    position: absolute;
    display: none;
    content: '';
    bottom: -25px;
    border-color: rgba(43, 85, 127, 0.9) transparent transparent transparent ;
    border-width: 25px 180px 0 0;
    border-style: solid;
    height: 0;
    width: 0;
    left: 0px;
}

#contact .fixedhead:after ,  #contact .fixedhead:before{

    display: none;
}

#socialMedia a
{
    cursor: pointer;
}

#wrapper
{
     background-color: rgba(31, 112, 183, 0.6);
     width:100%;
     
}
section#home
{
    width: 100%;
    height: 100vh;
    position: relative;
        padding-top: 20px;

}
section#contact
{
    width: 100%;

    position: relative;
  

}
section#skills
{
    width: 100%;
    min-height: 100vh;
    padding-top: 20px;
    position: relative;

  

}
section#about
{
    width: 100%;
   min-height: 500px;
    position: relative;
        padding-top: 20px;

 
}
section#work
{
    width: 100%;
    min-height: 100vh;
    position: relative;
    /*overflow: hidden;*/
    padding-top: 20px;
}
.main
{
    width:90%;
    margin: 0 auto;
    max-width: 1280px;
    position: relative;

  
}
#about .main
{
    opacity: 0;
}
#sideNavContainer
{
        z-index: 30000000;
}
#sideNav {
width: 100px;
margin: 0 auto;
position: fixed;
left: -250px;
border-width: 0 0 100vh 130px;
border-style: solid;
border-color: #2B557F transparent transparent #2B557F;
z-index: 0;
-webkit-transform: translate3d(0,0,0);


}
#sideNav:after{

display: block;
height: 0;
background-color: transparent;
border-width: 200px;
border-color: transparent transparent transparent transparent;
border-style: solid;
}
#sideNav:before{
content: '';
display: block;
height: 0;
background-color: transparent;
border-width: 0 200px 100vh;
border-color: #2B557F transparent transparent #2B557F;
border-style: solid;
position: relative;
z-index: -1;

}
/*#sideNav{
    content: '';
    display: block;
    height: 50px;
    background-color:red;
}

 Support transparent border colors in IE6. */
* html .top {
    filter:chroma(color=#123456);
    border-top-color:#123456;
    border-left-color:#123456;
}

.main div
{
    margin: 0 auto;
}
#logoContainer{
    position: fixed;
top: 50%;
left: 50%;
margin-top: -230px;
margin-left: -215px;
 max-width: 430px;
}
#logoContainer img
{
   width: 430px;
    display: block;
    max-width: 100%;
}
#nameText
{
    position: fixed;
    top:50%;
    left: 50%;
    margin-left: -250px;
    color: #FFF;
    font-size: 42px;
    font-weight: 700;
    text-align: center;
    width: 500px;
    margin-top:60px;

}
#nameText p:nth-of-type(2){

    font-size: 30px;
    font-weight: 100;

}

ul#mainNav
{
    position: absolute;
    top:70px;
    color: #FFF;
    left: -90px;

}
#mainNav li
{
    list-style: none;
    margin-bottom:20px;
    

}
 #arrowLeft , #arrowRight
    {
        display:none;
    }
#mainNav li a
{
 text-decoration: none;
 color: #FFF;
 cursor: pointer;
 font-size: 28px;   
}
#mainNav li a:hover
{
    color:#ffb347;
}

#myImageContainer
{
    width: 350px;
    float: none;
    position: relative;
    right: 0;
    height: 300px;
    top: 10px;
}
#myImageContainer svg
{
    width: 350px;
    height: 300px;
}
#myImageContainer img{
    position: absolute;
top: 25px;
width: 93%;
left: 2%;
}

.diamond
{
     border-style: solid;
border-color: transparent transparent rgba(31, 112, 183, 1)  transparent;
border-width: 0 300px 300px 300px;
height: 0;
width: 600px;
position: absolute;
right: 0;


}

.diamond:after
{
     content: "";
position: absolute;
top: 300px;
left: -300px;
width: 0;
height: 0;
border-style: solid;
border-color:rgba(31, 112, 183, 1) transparent transparent transparent;
border-width:600px 600px 0 600px;
}

#me
{
    position: relative;
    float: none;
    width: 100%;
    

}
#me p
{
    width:90%;
    margin:0 auto;
    color: #f7f7f7;
    line-height: 160%;
    letter-spacing: 1px;

}
#skillsCont
{
   margin: 0 auto;
   margin-top: 40px;
    position: relative;
}
.skill
{
    width:435px;
    float: left;
    position: absolute;
    height: 400px;
}
.skill svg 
{
    width: 435px;
    height: 400px;
}

.skill h3
{
   position: absolute;
top: 60px;
width: 300px;
text-align: center;
left: 70px;
opacity: 0;
font-size: 18px;


}

.visitText {

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 30px;
  font-weight: 600;
  margin: auto;
  font-size: 48px;
  margin-top: 15%;
  text-align: center;
  color: #2B557F;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;

}

#workPieceContainer
{
   
    position: relative;
}
div.portfolioPiece
{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -150px;
        margin-left: -150px;
}
.portfolioImage
{
   width: 700px;
position: absolute;
top: 100px;
height: 360px;
background-color: pink;
z-index: 300;
left: -45px;


}
.portfolioImage img
{
    height: 100%;
    width: 100%;
}
.portfolioText
{
width: 600px;
position: absolute;
top: 540px;
left: 90px;
height: 180px;
color: #FFF;
z-index: 300;
font-size: 32px;
} 

.portfolioLogo
{
width: 230px;
position: absolute;
top: 700px;
left: 185px;
/* height: 180px; */
color: #FFF;
z-index: 300;
font-size: 32px;
}
#mainHam
{
    position: fixed;
    left: 20px;
    top: 20px;
    z-index: 30000;
    height: 40px;
    width: 35px;
    cursor: pointer;
     -webkit-transition:0.3s ease-out;
    -moz-transition:0.3s ease-out;
    transition:0.3s ease-out;

}


#mainHam span
{
    border-bottom: 5px solid #FFF;
    display: block;
    width: 35px;
    border-radius:3px;
    position: absolute; 
    z-index: 30000;
    -webkit-transition:0.3s ease-out;
    -moz-transition:0.3s ease-out;
    transition:0.3s ease-out;

}
.portfolioPiece span
{
    display: block;
    width: 100%;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 20%;
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-out , top 0.3s ease-out ;
    color: rgba(0,0,0, 0.7);
    font-weight: 600;
    z-index: 0;
}

 span.activePPhead {

     top: 3%;
     opacity: 1;
}
#mainHam:hover span
{
   border-bottom: 5px solid #ffb347;
}
#mainHam span.mhMiddle
{
    
left: 0px;
top: 11px;

}
#mainHam span.mhTop
{
    
left: 0px;
top: 0;

}
#mainHam span.mhBottom
{
   
left: 0px;
top: 22px;

}
#mainHam.hamActive
{
    left:260px;
    top: 20px;
}
#mainHam.hamActive span.mhTop
{
    -webkit-transform: rotate3d(0, 0, 1, -40deg);
    -moz-transform: rotate3d(0, 0, 1, -40deg);
    transform: rotate3d(0, 0, 1, -40deg);
    top:4px;
    width: 20px;
}
#mainHam.hamActive span.mhBottom
{
    -webkit-transform: rotate3d(0, 0, 1, 40deg);
    -moz-transform: rotate3d(0, 0, 1, 40deg);
    transform: rotate3d(0, 0, 1, 40deg);
    top:17px;
    width: 20px;
}

.skill p
{position: absolute;
top: 87px;
width: 56%;
min-width: 240px;
left: 95px;
text-align: center;
opacity: 0;
}
.portfolioPiece
{
    width: 300px;
    height: 300px;
    opacity: 0;
    overflow: visible !important;
  

}
.portfolioPiece svg
{
      width: 100%;
    height: 100%;
    display: block;
    margin:0 auto;
    position: relative;
      cursor: pointer;
}

.portfolioPiece svg path{
    fill:rgb(249, 177, 74);
     fill-opacity: 0.7;
     -webkit-transition:all 0.4s ease-out;
    -moz-transition:all 0.4s ease-out;
    transition:all 0.4s ease-out;
    
}
.portfolioPiece svg path:hover
{
    fill-opacity: 0;
     -webkit-transition:all 0.4s ease-out;
    -moz-transition:all 0.4s ease-out;
    transition:all 0.4s ease-out;
}.portfolioPiece svg image
{
    display: none;
}
.portfolioPiece img{

position: absolute;
top: 12%;
left: 2.5%;
width: 95%;

}

#overlay
{
    display: none;
    position: fixed;
    height: 100%;
    width:100%;
    background-color: rgba(0, 0, 0, 0.7);
    top:0;
    left:0;
    z-index: 30004;
    overflow:auto;

}

#preloadOverlay
{
     display: block;
    position: fixed;
    height: 100%;
    width:100%;
    background-color: #2875b9;
    top:0;
    left:0;
    z-index: 30004;
    overflow:auto; 
}
#preloadOverlay img
{

position: fixed;
top: 50%;
left: 50%;
margin-top: -266px;
margin-left: -215px;
max-width: 430px;

}
   .workOverlay{ display: none;
    height: 0;
    width: 95%;
    max-width: 900px;
    position: absolute;
    top:50%;
    left: 50%;
    margin-left: -460px;
    margin-top: -250px;
    background-color: #FFF;
    padding: 10px;}
    .workOverlay h4
{
    font-size: 36px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.workOverlay img
{
    width:95%;
    margin:0 auto;
    display: block;
}
.workOverlay h4
{
    color:#2B557F;
    width: 95%;
     margin:0 auto;
     margin-bottom: 20px;
}
.workOverlay p
{
    line-height: 160%;
    letter-spacing: 1px;
    width: 95%;
    margin:0 auto;
}

.skill img.skillIcon{
position: absolute;
bottom: 90px;
width: 90px;
left: 170px;
opacity: 0;

}
.overlayClose
{
    width:30px;
    height: 30px;
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    top:10px;
    right:0;
    cursor: pointer;
}
#formContainer
{
    width: 90%;
    max-width: 600px;
    min-height: 400px;
    margin:0 auto;
   background-color: #2B557F;
   padding-top: 20px;
}

#formContainer input[type=text] , #formContainer input[type=email]{
    
        padding:8px;
        font-size:16px;
        border-radius:0;
        border:none;
        box-shadow:none;
        -webkit-box-shadow:none;
        -moz-box-shadow:none;
         background-color: rgba(31, 112, 183, 0.4);
         display: block;
        margin:12px auto;
       border:2px solid #F8B14A;
        width: 80%;
       color: #f7f6f6;
       -webkit-transition: border-color 0.3s;
       -moz-transition: border-color 0.3s;
       -transition: border-color 0.3s;

    }
    ::-webkit-input-placeholder {
   color: #f7f6f6;
}
#formContainer input[type=text]:focus , #formContainer input[type=email]:focus , #formContainer button{

outline: none;
box-shadow: 

}
:-moz-placeholder { /* Firefox 18- */
   color: #f7f6f6;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #f7f6f6;
}

:-ms-input-placeholder {  
   color: #f7f6f6;
}
#formContainer textarea{
    
  padding:8px;
  font-size:16px;
  border-radius:0;
  border:none;
  box-shadow:none;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  background-color: rgba(31, 112, 183, 0.4);
  margin:12px auto;
  border:2px solid #F8B14A;
  width: 80%;
  color: #f7f6f6;
  height: 150px;
  display: block;
  font-family: 'Raleway', sans-serif;
  -webkit-transition: border-color 0.3s;
  -moz-transition: border-color 0.3s;
  -transition: border-color 0.3s;
}

.wrongInput {

     border: 2px solid red !important;
}
  
#formContainer input[type=button] , button{
    border-style: solid;
    border-color: #2B557F #2B557F rgba(255,179,91,1) #2B557F;
    border-width: 0 40px 40px 40px;
    height: 0;
    width: 160px;
    position: relative;
    margin: 23px auto;
    display: block;
    cursor: pointer;
    overflow: visible;
    
}

#emailMsg {

      border-style: solid;
  border-color: #2B557F #2B557F rgba(255,179,91,1) #2B557F;
  border-width: 0 65px 65px 65px;
  height: 0;
  width: 160px;
  position: absolute;
  margin: 23px auto;
  display: block;
  cursor: pointer;
  overflow: visible;
    left: 50%;
  margin-left: -140px;
  display: none;
}

#emailMsg:after {

  content: "";
  position: absolute;
  top: 65px;
  left: -65px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: rgba(255,179,91,1) transparent transparent transparent;
  border-width: 150px 145px 0 145px;

}

.visitMe {

        border-style: solid;
  border-color: #2B557F #2B557F rgba(255,179,91,1) #2B557F;
  border-width: 0 65px 65px 65px;
  height: 0;
  width: 160px;
  position: absolute;
  margin: 23px auto;
  display: block;
  cursor: pointer;
  overflow: visible;
    left: 50%;
  margin-left: -140px;
  display: block;
  top: 50%;
}

.visitMe:after {

 content: "";
  position: absolute;
  top: 65px;
  left: -65px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: rgba(255,179,91,1) transparent transparent transparent;
  border-width: 150px 145px 0 145px;

}

#home h4{
    opacity:0;
}

#emailMsg span {
    
      color: #3d5f7e;
  position: absolute;
  display: block;
  text-align: center;
  font-size: 30px;
  z-index: 100;
  width: 182px;
  left: -10px;
  top: 20px;
  font-weight: bold;

}

.visitMe span {
    
   color: #3d5f7e;
  position: absolute;
  display: block;
  text-align: center;
  font-size: 30px;
  z-index: 100;
  width: 182px;
  left: -10px;
  top: 20px;
  font-weight: bold;

}

.workLink {

    display: block;
    overflow: hidden;
    position: relative;
}
.workLink svg {

    position: absolute;
    width: 80%;
    left: 10%;
    top:0%;
    opacity: 0;
    -webkit-transition: all 0.3s;
}


.workLink:hover svg {

    position: absolute;
    width: 50%;
    left: 25%;
    top:10%;
    opacity: 0.9;
}

.workLink:hover .visitText {

  opacity: 1;
}

.workLink svg path {

    fill: rgb(249, 177, 74);
     fill-opacity: 1 !important;
}

svg, symbol, image, marker, pattern, foreignObject { overflow: hidden }
svg { width:attr(width); height:attr(height) }
svg:not(:root) { overflow: visible; }

 button:hover
 {
      border-color: #2B557F #2B557F rgba(255,179,91,1) #2B557F;
 }
#me a
{
    color: rgb(249, 177, 74);
}
button span
{
    position: absolute;
z-index: 3;
color: #2B557F;
font-size: 30px;
top: 26px;
left: 7px;
}
#arrowLeft
{
    position: absolute;
top: 50%;
margin-top: -100px;
width: 80px;
left: 2%;
z-index: 20;
cursor: pointer;
}

#arrowRight
{
    position: absolute;
top: 50%;
margin-top: -100px;
width: 80px;
right: 2%;
z-index: 20; 
cursor: pointer;
}


#formContainer input[type=button]:after , button:after {
    content: "";
    position: absolute;
    top: 39px;
    left: -40px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: rgba(255,179,91,1) transparent transparent transparent;
    border-width: 90px 80px 0 80px;
}
  button:hover:after
 {
      border-color: rgba(255,179,91,1) transparent transparent transparent;
 }
 svg image
 {
    display: none;
 }
ul#mainNav li a.mainSel
{
    
font-weight: bold;
color: #ffb347;

}

#sideLogo
{   position: absolute;
    bottom: 20px;
    width: 130px;
    left: -120px;
}
#sideLogo img
{
    width: 100%;
    opacity: 0.7;
    -webkikt-transition:0.3s ease-out;
    -moz-transition:0.3s ease-out;
    transition:0.3s ease-out;

}
#sideLogo a
{
    cursor: pointer;
}
#sideLogo a:hover img , #sideLogo a.mainSel img
{
    opacity: 1;
}
 @media screen and (max-width: 450px) {

    section#home {
        z-index:-1;
    }
    #logoContainer {

       width:90%;
       left: 5%;
       margin-left:0;
       margin-top:10px;
       top: 0;
       z-index: -1;


    }
     #logoContainer img {
        width: 100%;
     }

     #nameText
     {
        width: 90%;
        margin-left:0;
        left:5%;
        font-size: 36px;
        z-index:-1;
     }
}

 @media only screen and (max-width: 650px) {


 

  #sideLogo{
    left: -170px;
  }

  #mainHam.hamActive {
-webkit-transform: rotate3d(0, 0, 1, 90deg);
-moz-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
 left:10px;
    top: 200px;
}
#mainHam.hamActive .mhMiddle{
   width: 4px;
   left: 1px;
    
}
#formContainer
{
    width: 110%;
    margin-left: -5%;
}
#sideNav:before {
content: '';
display: block;
height: 0;
background-color: transparent;
border-width: 0 0px 160px 0px;
border-color: #2B557F transparent transparent #2B557F;
border-style: solid;
position: relative;
z-index: -1;
}

#sideNav {
width: 100%;
margin: 0 auto;
position: fixed;
left: -720px;
border-width: 0 0 100px 100vw;
border-style: solid;
border-color: #2B557F transparent transparent #2B557F;
z-index: 2999;
/* background-color: red; */
/* background-color: red; */
top: -380px;
left: 0;
}

#mainNav li {
    margin-bottom: 12px;
}
ul#mainNav {
position: absolute;
top: 20px;
color: #FFF;
left: -95%;
width: 100%;
}
ul#mainNav li a
{
/*-webkit-transition:0.3s;*/
position: relative;
top: 0;
left: 0;
display: block;
width: 130px;
font-size: 25px;


}



ul#mainNav li a:hover
{

}
ul#mainNav li a.mainSel
{
    
font-weight: bold;
color: #ffb347;

}


    }
@media only screen and (max-width: 930px) {

   .workOverlay
    {
       margin-left:0;
       left: 2.5%;
       width:90%;
       padding:2.5%;
    }

 }

    @media only screen and (max-width: 768px) {

    #arrowLeft , #arrowRight
    {
        display:block;
    }

    .portfolioPiece span {

        top: 5px;
        opacity: 1;
    }

     h4.fixedhead  , #contact h4.fixedhead{

    position: relative;
    margin:0 auto;
    left: auto;
    top: auto;
    font-size: 48px;
    background: transparent;
    width: 240px;
    -webkit-transform: translate3d(0,0,0);
  }

  h4.fixedhead:before , h4.fixedhead:after {

    display: none;
  }

  section#work {

    overflow: hidden;
  }

  .visitText {
    font-size: 5vw;
  }

 }
 @media only screen and (max-width: 518px) {

    #arrowLeft , #arrowRight
    {
        width:15%;
        top:42.5%;
    }
    #arrowLeft
    {
        left: 2%;
    }
    #arrowRight
    {
        right: 2%;
    }

    h4 {

        -webkit-transition: all 0s;
        -moz-transition:  all 0s;
        transition:  all 0s;

    }

 }

 @media only screen and (max-width: 440px) {

   .skill
    {
        width: 110%;
        margin: 10px auto !important;
        left: -5% !important;
        background-color: rgba(205,205, 205, 1);
        margin-bottom: 10px;
        border-bottom: 5px solid #ffb347;
        height: 395px !important;

    }
    .skill svg
    {
       width: 180px;
height: 180px;
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -90px;


    }
    .skill h3  , .skill p 
    {
        width: 80%;
        left: 10%;
    }
    .skill p {
        
       
    }
    .skill img.skillIcon
    {
        left: 50%;
        margin-left: -38px;
        width: 76px;
        bottom: 72px;
       
    }
    .skill:nth-of-type(3) img.skillIcon
    {
         bottom: 50px;
    }
    section#skills
    {
       

    }

 }

 @-webkit-keyframes downmove {
    0% {bottom: 25px;}
    40% {bottom: 5px}
    100%{bottom:25px;}
} 

@-webkit-keyframes smalldownmove {
    0% {top: 3px;}
    40% {top: 10px}
    100%{top: 3px;}
} 

 @media only screen and (max-width: 380px) {

    #myImageContainer{
        width: 95%;
        height: auto;
    }
    #myImageContainer svg{

        width: 100%;
        height: auto;
     }
     #myImageContainer img {
position: absolute;
top: 4.5%;
width: 93.5%;
left: 1.5%;
}
 }