#primary{position: relative; max-width: 100%; margin: 0 auto;}

#primary article img{cursor: pointer}

#primary .category-name{position: relative; display: inline-block; margin: 0 auto; font-size: 1rem; vertical-align: top; font-weight: bold; color: rgba(255, 163, 0, 1); top: -30px; margin-left: 60px; width: 130px;}

#primary .category-name .first-letter{
	display: inline-block;   
	top: 50%; 
    right: 50%;
    transform: translate(50%,-50%);
    text-transform: uppercase;
    font-family: verdana;
    font-size: 50px;
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
    -webkit-animation-name: example; 
    -webkit-animation-duration: 4s; 
    animation-name: example;
    animation-duration: 4s;
  
    text-shadow: 1px 1px 1px #ffa300,
        1px 2px 1px #ffa300,
        1px 3px 1px #ffa300,
        1px 4px 1px #ffa300,
        1px 5px 1px #ffa300,
        1px 6px 1px #ffa300,
        1px 7px 1px #ffa300,
        1px 8px 1px #ffa300,
        1px 9px 1px #ffa300,
        1px 10px 1px #ffa300,
    1px 18px 6px rgba(255, 163, 0,0.4),
    1px 22px 10px rgba(255, 163, 0,0.2),
    1px 25px 35px rgba(255, 163, 0,0.2),
    1px 30px 60px rgba(255, 163, 0,0.4);
}

	@keyframes animated_div
		{
			0%   {}
			20%  {transform: rotateY(20deg);}
			40%  {transform: rotateY(40deg);}
			60%  {transform: rotateY(60deg);}
			80%  {transform: rotateY(80deg);}
			100% {transform: rotateY(100deg);}
  
		}

#primary .category-name .first-letter{animation:animated_div 5s infinite;
			-moz-animation:animated_div 5s infinite;
			-webkit-animation:animated_div 5s infinite;
			border-radius:5px;
			-webkit-border-radius:5px;
			transform-style: preserve-3d;}
#primary .cees_menu{width: 179px; max-width: 100%; float: left; position: relative; margin-top: 75px; left: -61px;}

#primary .cees_menu img{border-radius: 5px; transition: transform 0.6s; transform-style: preserve-3d;}

#primary .cees_menu img:hover{ transition: 0.9s; transform: rotateY(180deg); filter: saturate(2);}

#primary .paintings{position: absolute; max-width: 100%; float: left; top: 41px; left: 200px;}

#primary .paintings p{color: rgba(255, 163, 0, 1); font-weight: bold; animation: blink 1.5s infinite}

#primary .toggleSection p{color: rgba(255, 163, 0, 1); font-weight: bold; animation: blink 1.5s infinite}

#primary .post{width: 60px; max-width: 100%; float: left; padding-right: 5%; padding-bottom: 5%;}

#primary .entry-title{font-size: 1.9rem; width: 750px; line-height: 0.5; color: rgba(255, 163, 0, 1); font-weight: normal;}

#primary .medium-painting-view{width: 750px;}

.fancybox-custom .fancybox-skin {box-shadow: 0 0 50px #222;}

#primary .medium-painting-view img{border-radius: 10px;}

#primary .medium-painting-view img:hover{filter: saturate(2); transition: 0s; transform: rotateY(0deg);}

        @keyframes pulseBackground {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }


              @keyframes blink {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }


@media(max-width: 1024px){

    #primary .cees_menu{left: 20%; width: 600px; margin-top: 90px;}
    #primary .cat-img{left: 395px;}
    #primary .play{display: none;}
    #primary .toggleSection{display: block !important}
    #primary .paintings{display: none;}
    #primary .post{position: relative; width: 430px; max-width: 100%; padding: 0; margin-bottom: 10%;}
    #primary .medium-painting-view img{max-width: 100%; width: 100%;}
    body #primary .toggleSection{margin-left: 0; position: relative}
    #primary .entry-title{width: 430px; text-align: center; padding: 1rem; font-size: 1.1rem;}
    #primary .medium-painting-view{width: 430px;}
    #primary .toggleSection p{margin-left: 78%;}

}

@media(max-width: 950px){
   
    #primary .cat-img{left: 320px;}
    #primary .cees_menu{left: 14.5%;}
    #primary .toggleSection p{margin-left: 46%;}

}

@media(max-width: 768px){

    #primary .cat-img{left: 291px;}
    #primary .cees_menu{left: 13.5%; width: 600px; margin-top: 90px;}

}

@media(max-width: 700px){

#primary .cat-img{left: 265px;}
#primary .cees_menu{left: 11.5%; width: 600px;}
#primary .toggleSection p{margin-left: 42%;}
}



@media(max-width: 600px){

    #primary .cat-img{left: 205px;}

    #primary .medium-painting-view{width: 480px;}
}

@media(max-width: 450px){


    #primary .cat-img{left: 133px;}
  #primary .cees_menu{left: 0; width: 600px;}

}

@media(max-width: 414px){

#primary .medium-painting-view{width: 413px;}
}

@media(max-width: 390px){

#primary .medium-painting-view{width: 389px;}
#primary .entry-title{position: relative; left: -29px; font-size: 1rem;}

}

@media(max-width: 375px){
#primary .cat-img{left: 111px;}
#primary .medium-painting-view{width: 374px;}
#primary .toggleSection p{margin-left: 43%;}
}

@media(max-width: 360px){

#primary .medium-painting-view{width: 359px;}

}