/*
font-family: 'Poiret One', cursive;
font-family: 'Open Sans', sans-serif;
font-family: 'Poiret one', cursive;

/*  green:  #cfe8da;
    red:#d82b46;
    blue:#559abe;
    light blue:#b3d2e2;
      */

* { box-sizing: border-box; }


.cf:after {
  content:"";
  display:table;
  clear:both;
}

html {
  background-image: url(../images/home/main-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  font:16px/1.5 'Open Sans', sans-serif;
}

body {
  
  font-size: 100%;
  background-color:rgba(230,230,230,0.5);
  max-width: 60em;
  margin: 0 auto;
}




img {
  height: auto;
  max-width: 100%;
  
}

.container {
  margin: 0 auto;
  max-width: 950px;
}

.row {
  overflow: hidden;
  padding: 0 20px;
}


.header-home{
  background-image: url(../images/home/home-cover.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center 0 ;

}

.header-paintings{
  background-image: url(../images/paintings/paintings-header.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center 0 ;

}
.header-mix{
  background-image: url(../images/mixed-media/mix-header.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center 0 ;

}
.header-jewelry{
  background-image: url(../images/jewelry/jewelry-header.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center 0 ;

}

.header-web{
  background-image: url(../images/web/web-header.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center 0 ;

}


img.logo {
  width: 42%;
  margin: 0 auto;
  display: block;
  padding-top: 30px;
}



nav[role=navigation] li a:hover {
  color:#000;
}


nav {
  margin-bottom: 40px;
}



a.menu-link {
    display: block;
    padding: 20px;
    text-decoration: none;
    color: #000;
    background-image: url(../images/home/menu.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: -26px;
    text-align: center;

}
    nav[role=navigation] {
      clear: both;
      -webkit-transition: all 0.3s ease-out;  
      -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
    }
    .js nav[role=navigation] {
      overflow: hidden;
      max-height: 0;
    }
    nav[role=navigation].active {
      max-height: 24em;
    }
    nav[role=navigation] ul {
      margin: 0;
      padding: 0;
      border-top: 1px solid #fff;
      background: #b3d2e2;
    }
    nav[role=navigation] li a {
      display: block;
      padding: 0.8em;
      border-bottom: 1px solid #808080;
      text-decoration: none;
      color: #000;
       font: 1.4em/1.5em 'Poiret One', cursive;
    }
    
    @media screen and (min-width: 48em) {
      a.menu-link {
         display: none;
      }
      .js nav[role=navigation] {
        max-height: none;
      }
      nav[role=navigation] ul {
        margin: 0 0 0 -0.25em;
        border: 0;
      }
      
      nav[role=navigation]  li {
        display: inline-block;
        margin: 0 0.25em;
      }
      nav[role=navigation] li a {
        border: 0;
      }
    }




.head-banner blockquote {
  font: 2em/2em 'Poiret one', cursive;
  text-align: center;
  color: #559abe;
  }

.head-banner h1{
   font: 1.5em/1.5em 'Poiret One', cursive;
   text-align: center;
}


.artwork-section img{
  margin: 10px auto;
  display: block;
}

.artwork-section h3 {
  margin: 0 auto;
  text-align: center;
  color: #000;
  font: 1.7em/2em'Poiret One', cursive;
}


.artwork-section a{
  text-decoration: none;
}


.contact-me h4 {
  font: 2.5em/0em 'Poiret one', cursive;
  color: #559abe;
  text-align: center;
  margin-top: 40px;
}


.contact-me img{
  display: block;
  margin: 0 auto;
}


.contact-me h5{
  text-align: center;
  font: 1.3em/2em 'Poiret One', cursive;
}



.socialmedia li {
  display: inline-block; 
}
.socialmedia ul{
  text-align: center;
  padding: 0;
}

.socialmedia img{
  width: 70%;
}



.footer p{
  font: 0.8em/0.7em 'Open Sans', sans-serif;
  margin: 0 auto;
  text-align: center;
  color: #04070a;
}









.wrapper-box{
  margin: 0 auto;
}
            .demo-gallery > ul {
              margin-bottom: 0;
            }
            .demo-gallery > ul > li {
              float: left;
              width: 200px;
              margin: 10px 40px;
              list-style: none;
            }
}
            .demo-gallery > ul > li a {
              border: 3px solid #FFF;
              border-radius: 3px;
              display: block;
              overflow: hidden;
              position: relative;
              float: left;
            }
            .demo-gallery > ul > li a > img {
              -webkit-transition: -webkit-transform 0.15s ease 0s;
              -moz-transition: -moz-transform 0.15s ease 0s;
              -o-transition: -o-transform 0.15s ease 0s;
              transition: transform 0.15s ease 0s;
              -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
              height: 100%;
              width: 100%;
            }
            .demo-gallery > ul > li a:hover > img {
              -webkit-transform: scale3d(1.1, 1.1, 1.1);
              transform: scale3d(1.1, 1.1, 1.1);
            }
            .demo-gallery > ul > li a:hover .demo-gallery-poster > img {
              opacity: 1;
            }
            .demo-gallery > ul > li a .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.1);
              bottom: 0;
              left: 0;
              position: absolute;
              right: 0;
              top: 0;
              -webkit-transition: background-color 0.15s ease 0s;
              -o-transition: background-color 0.15s ease 0s;
              transition: background-color 0.15s ease 0s;
            }
            .demo-gallery > ul > li a .demo-gallery-poster > img {
              left: 50%;
              margin-left: -10px;
              margin-top: -10px;
              opacity: 0;
              position: absolute;
              top: 50%;
              -webkit-transition: opacity 0.3s ease 0s;
              -o-transition: opacity 0.3s ease 0s;
              transition: opacity 0.3s ease 0s;
            }
            .demo-gallery > ul > li a:hover .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.5);
            }
            .demo-gallery .justified-gallery > a > img {
              -webkit-transition: -webkit-transform 0.15s ease 0s;
              -moz-transition: -moz-transform 0.15s ease 0s;
              -o-transition: -o-transform 0.15s ease 0s;
              transition: transform 0.15s ease 0s;
              -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
              height: 100%;
              width: 100%;
            }
            .demo-gallery .justified-gallery > a:hover > img {
              -webkit-transform: scale3d(1.1, 1.1, 1.1);
              transform: scale3d(1.1, 1.1, 1.1);
            }
            .demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
              opacity: 1;
            }
            .demo-gallery .justified-gallery > a .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.1);
              bottom: 0;
              left: 0;
              position: absolute;
              right: 0;
              top: 0;
              -webkit-transition: background-color 0.15s ease 0s;
              -o-transition: background-color 0.15s ease 0s;
              transition: background-color 0.15s ease 0s;
            }
            .demo-gallery .justified-gallery > a .demo-gallery-poster > img {
              left: 50%;
              margin-left: -10px;
              margin-top: -10px;
              opacity: 0;
              position: absolute;
              top: 50%;
              -webkit-transition: opacity 0.3s ease 0s;
              -o-transition: opacity 0.3s ease 0s;
              transition: opacity 0.3s ease 0s;
            }
            .demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.5);
            }
            .demo-gallery .video .demo-gallery-poster img {
              height: 48px;
              margin-left: -24px;
              margin-top: -24px;
              opacity: 0.8;
              width: 48px;
            }
            .demo-gallery.dark > ul > li a {
              border: 3px solid #04070a;
            }
            .wrapper .demo-gallery {
              padding-bottom: 5px;
              margin-left: 40px;
            }


.contact-me a{
  color: #559abe;
  text-decoration: none;
}

.contact-me a:hover{
  color: #d82b46;
  text-decoration: none;

}





.title h1 {
  text-align: center;
  padding: 94px;
  margin: 0;
  font: 2.6em/1.5em 'Poiret one', cursive;
  color: #559abe;
}




.about-me {
  background-image: url(../images/paintings/arrows.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 0;
  text-align: center;
  margin: 20px 0 35px 0;
  font: 2em/1.1em 'Poiret One', cursive;
}

.about-p{
  padding: 20px 10px;
}

.art-title{
  text-align: center;
  margin:60px 0 35px 0;
  font: 2em/1.5em 'Poiret One', cursive;
  background-color: #b3d2e2
}


#active a{
  color: #559abe;
}

.sub-title {
  color: #559abe;
  margin: 40px 0 30px 33px;
}

.back{
  padding: 30px;
  width: 158px;
  margin: 0 auto;
}
.back p{
  font: 1em/1.5em 'Poiret one', cursive;
  text-align: center;
  color: #559abe;
}
#contact-home{
  margin-top: 140px;
}

@-ms-keyframes wiggle{0%{-ms-transform:rotate(3deg);}50%{-ms-transform:rotate(-3deg);}100%{-ms-transform:rotate(3deg);}}
@-moz-keyframes wiggle{0%{-moz-transform:rotate(3deg);}50%{-moz-transform:rotate(-3deg);}100%{-moz-transform:rotate(3deg);}}
@-webkit-keyframes wiggle{0%{-webkit-transform:rotate(3deg);}50%{-webkit-transform:rotate(-3deg);}100%{-webkit-transform:rotate(3deg);}}
@keyframes wiggle{0%{transform:rotate(3deg);}50%{transform:rotate(-3deg);}100%{transform:rotate(3deg);}}
img.wiggle-me:hover{-ms-animation:wiggle .3s 2;-moz-animation:wiggle .3s 2;-webkit-animation:wiggle .3s 2;animation:wiggle .3s 2;}
    

/*----------------------------------------------------Iphone 6 landscape 667px*/

@media screen and (min-width: 667px){

.container {
  margin: 0 auto;
}

.row {
  overflow: hidden;
  padding: 0;
}

nav[role=navigation] ul {
  margin: 3.5em 0 0 -0.25em;
  }

nav[role=navigation] li a {
  padding: 10px 28px;
  color: #d82b46;
}


nav[role=navigation] ul {
  background: #fff;
}



.title h1 {
  padding: 96px;
  font: 2.4em/1.5em 'Poiret one', cursive;
}

.about-p{
  padding: 10px 70px;
}


.contact-me p{
  padding: 0 87px;
}



}
/*-----------------------------------------------End of Iphone 6 landscape 667px*/






/*----------------------------------------------------Ipad portrait 768px*/

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

nav[role=navigation] li {
    display: inline-block;
    margin: 0px 9px;
}



nav {
  margin-bottom: 0px;
}

.head-banner blockquote{
  padding-top: 24px;
  font: 2.5em/2em 'Poiret one', cursive;
}


.head-banner h1 {
    font: 1.8em/1.5em 'Poiret One', cursive;
    padding-bottom: 75px;
   
}

.artwork-section{
  width: 375px;
  float: left;
  margin-bottom: 30px;
}




.title h1 {
    padding: 98px 0 50px 0;
    font: 2.4em/1.5em 'Poiret one', cursive;
}


.demo-gallery > ul > li {
    margin: 10px 20px;
}

.about-me {
    margin: 60px 0 35px 0;
    font: 2em/1.3em 'Poiret One', cursive;
}
.artwork-section-wrap.cf {
    max-width: 767px;
    margin: 0 auto;
}

}

/*---------------------------------------------------end of-Ipad portrait 768px*/
@media screen and (min-width: 800px){
  nav[role=navigation] li {
  margin: 0 13px;
}
}

@media screen and (min-width: 850px){
  nav[role=navigation] li {
  margin: 0 18px;
}
}
/*----------------------------------------------------desktop 960px*/

@media screen and (min-width: 960px){

.container {
  margin: 0 auto;
  max-width: 100%;
}

.row {
  overflow: hidden;
  padding: 0;
}


.artwork-section {
  width: 239px;
  float: left;
}




nav[role=navigation] li {
  margin: 0 29px;
}

.contact-me{
  margin-bottom: 50px;
}

.contact-me h5 {
  font: 1.3em/0em 'Poiret One', cursive;
  float: right;
  margin-right: 307px;
   
}

.contact-me img {
  float: left;
  margin-left: 280px;
   
}
.demo-gallery > ul > li {
  margin: 10px 10px;
  width: 200px;
}



.sub-title {
  margin: 50px 0 0px 51px;
}

.contact-me p{
  width: 683px;
  margin: 0 auto;
  padding: 0 30px 30px 30px;
}

.artwork-section-wrap.cf {
    max-width: 960px;
    margin: 0 auto;
}




}
/*----------------------------------------------------End end of 960px*/