/*!
 * Start Bootstrap - 4 Col Portfolio (http://startbootstrap.com/template-overviews/4-col-portfolio)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-4-col-portfolio/blob/master/LICENSE)
 */

body {
    padding-top: 54px;
	background-image: url('../pictures/bg3.png');
	background-position: center top;
	background-size: auto;
	background-repeat: repeat;
	background-attachment: fixed;
	background-color: #000000;	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;	
}

p {
	color:#cccccc;
	font-size:12px;
}
}

.portfolio-item {
    margin-bottom: 30px;
}

.pagination {
    margin-bottom: 30px;
}

a:link {
	color: #CCCCCC;
	text-decoration: none;
}
a:visited {
	color: #CCCCCC;
	text-decoration: none;
}
a:hover {
	color: #FFFFFF;
	text-decoration: none;
}
a:active {
	color: #CCCCCC;
	text-decoration: none;
}

#crossfade {
    position:relative;
	top:3px;
	padding-right:20px;
	padding-left:20px;
    height:32px;
    width:100%;
	display:inline-block;
}
#crossfade img {
    position:absolute;
	cursor:pointer;
    left:0;
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;    
    transition: opacity 0.5s ease-in-out;
}
 
#crossfade img.top:hover {
    opacity:0;
}

#cf {
  position:relative;
  height:100%;
  width:100%;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  max-width: 100%;
  height: auto;

}

  @keyframes cfFadeInOut {
  0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}


#cf img.top {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}				

        /* jssor slider bullet navigator skin 01 css */
        /*
        .jssorb01 div           (normal)
        .jssorb01 div:hover     (normal mouseover)
        .jssorb01 .av           (active)
        .jssorb01 .av:hover     (active mouseover)
        .jssorb01 .dn           (mousedown)
        */
        .jssorb01 {
            position: absolute;
        }
        .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
            position: absolute;
            /* size of bullet elment */
            width: 12px;
            height: 12px;
            filter: alpha(opacity=70);
            opacity: .7;
            overflow: hidden;
            cursor: pointer;
            border: #000 1px solid;
        }
        .jssorb01 div { background-color: gray; }
        .jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
        .jssorb01 .av { background-color: #fff; }
        .jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }

        /* jssor slider arrow navigator skin 02 css */
        /*
        .jssora02l                  (normal)
        .jssora02r                  (normal)
        .jssora02l:hover            (normal mouseover)
        .jssora02r:hover            (normal mouseover)
        .jssora02l.jssora02ldn      (mousedown)
        .jssora02r.jssora02rdn      (mousedown)
        .jssora02l.jssora02lds      (disabled)
        .jssora02r.jssora02rds      (disabled)
        */
        .jssora02l, .jssora02r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 25px;
            height: 25px;
			z-index:10000;
            cursor: pointer;
            background: url('img/a02.png') no-repeat;
            overflow: hidden;
        }
        .jssora02l { background-position: -3px -33px; }
        .jssora02r { background-position: -63px -33px; }
        .jssora02l:hover { background-position: -123px -33px; }
        .jssora02r:hover { background-position: -183px -33px; }
        .jssora02l.jssora02ldn { background-position: -3px -33px; }
        .jssora02r.jssora02rdn { background-position: -63px -33px; }
        .jssora02l.jssora02lds { background-position: -3px -33px; opacity: .3; pointer-events: none; }
        .jssora02r.jssora02rds { background-position: -63px -33px; opacity: .3; pointer-events: none; }
	
.logocss
{
padding-top:20px;
position:relative;
left:-20px;

}

.logocss2
{
padding-top:20px;
position:relative;
left:-20px;
}

.ytvid
{
width:350px;
height: 175px;
}

@media (min-width: 992px) {
    body {
        padding-top: 56px;
    }
#cf {
  position:relative;
  height:393px;
  width:699px;
  margin:0 auto;
}	
.ytvid
{
width:1150px;
height: 600px;
}
.logocss
{
position:relative;
padding-top:0px;
width:100%;
height: 400px;
top: 50%;
left: 50%;
margin-top: 25px;
margin-left: -375px;
padding-bottom:40px;
}
.logocss2
{
position:relative;
padding-top:0px;
width:100%;
min-height: 50px;
top: 50%;
left: 50%;
margin-top: 25px;
margin-left: -600px;
padding-bottom:40px;
}
}