

/*** cnvyr.css.gz ***/
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
    font-family: 'open_sanscondensed_light';
    src: url('../fonts/opensanscondensed/opensans-condlight-webfont.eot');
    src: url('../fonts/opensanscondensed/opensans-condlight-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensanscondensed/opensans-condlight-webfont.woff2') format('woff2'),
         url('../fonts/opensanscondensed/opensans-condlight-webfont.woff') format('woff'),
         url('../fonts/opensanscondensed/opensans-condlight-webfont.ttf') format('truetype'),
         url('../fonts/opensanscondensed/opensans-condlight-webfont.svg#open_sanscondensed_light') format('svg');
    font-weight: normal;
    font-style: normal;

}

.btn-primary:hover{
/*
    these are all default valu.es, note that hue-rotate and blur have units.
    You'll also need to include the vendor prefixes.
  */
  /* Drop shadow has the same syntax as box-shadow – see below for why it's amazing! */
}

@font-face {
    font-family: 'open_sansCnLtIt';
    src: url('../fonts/opensanscondensed/opensans-condlightitalic-webfont.eot');
    src: url('../fonts/opensanscondensed/opensans-condlightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensanscondensed/opensans-condlightitalic-webfont.woff2') format('woff2'),
         url('../fonts/opensanscondensed/opensans-condlightitalic-webfont.woff') format('woff'),
         url('../fonts/opensanscondensed/opensans-condlightitalic-webfont.ttf') format('truetype'),
         url('../fonts/opensanscondensed/opensans-condlightitalic-webfont.svg#open_sansCnLtIt') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'open_sans_condensedbold';
    src: url('../fonts/opensanscondensed/opensans-condbold-webfont.eot');
    src: url('../fonts/opensanscondensed/opensans-condbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensanscondensed/opensans-condbold-webfont.woff2') format('woff2'),
         url('../fonts/opensanscondensed/opensans-condbold-webfont.woff') format('woff'),
         url('../fonts/opensanscondensed/opensans-condbold-webfont.ttf') format('truetype'),
         url('../fonts/opensanscondensed/opensans-condbold-webfont.svg#open_sans_condensedbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

img { -ms-interpolation-mode: bicubic; }

/****************************************************************
 *
 * CSS Percentage Circle
 * Author: Andre Firchow
 *
*****************************************************************/
/* 
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.owl-carousel .owl-animated-in {
  z-index: 0;
}
.owl-carousel .owl-animated-out {
  z-index: 1;
}
.owl-carousel .fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* 
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}

/* 
 *  Core Owl Carousel CSS File
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1;
}
.owl-carousel .owl-stage {
  position: relative;
  -ms-touch-action: pan-Y;
}
.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  /* fix for flashing background */
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
  cursor: pointer;
  cursor: hand;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel.owl-loaded {
  display: block;
}
.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}
.owl-carousel.owl-hidden {
  opacity: 0;
}
.owl-carousel .owl-refresh .owl-item {
  display: none;
}
.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel .owl-item img {
  display: block;
  width: 100%;
  -webkit-transform-style: preserve-3d;
}
.owl-carousel.owl-text-select-on .owl-item {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}
.owl-carousel .owl-grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}
.owl-carousel.owl-rtl {
  direction: rtl;
}
.owl-carousel.owl-rtl .owl-item {
  float: right;
}

/* No Js */
.no-js .owl-carousel {
  display: block;
}

/* 
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  -webkit-transition: opacity 400ms ease;
  -moz-transition: opacity 400ms ease;
  -ms-transition: opacity 400ms ease;
  -o-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}
.owl-carousel .owl-item img {
  transform-style: preserve-3d;
}

/* 
 * 	Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000;
}
.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  -webkit-transition: scale 100ms ease;
  -moz-transition: scale 100ms ease;
  -ms-transition: scale 100ms ease;
  -o-transition: scale 100ms ease;
  transition: scale 100ms ease;
}
.owl-carousel .owl-video-play-icon:hover {
  -webkit-transition: scale(1.3, 1.3);
  -moz-transition: scale(1.3, 1.3);
  -ms-transition: scale(1.3, 1.3);
  -o-transition: scale(1.3, 1.3);
  transition: scale(1.3, 1.3);
}
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none;
}
.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  -webkit-transition: opacity 400ms ease;
  -moz-transition: opacity 400ms ease;
  -ms-transition: opacity 400ms ease;
  -o-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}
.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
}




.news-box img{
width:100%!important;	
}
.news-wrapper ul li{
margin-left:20px!important;
}
ul.mob-dropdown{
margin-left:0px!important;
}
ul.mob-dropdown li a{
font-weight:bold!important;
}
* {
margin: 0;
padding: 0;
}
img.nofeature{
 filter: gray; /* IE6-9 */
  filter: grayscale(1); /* Firefox 35+ */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}


.no-margin-left{
margin-left:-7px!important;
}

.margin-reset {
	margin: 0!important;	
}
.subh3{
font-size:11px!important; padding-bottom:0px!important;margin-bottom:0px!important; color:#4e4e4e!important; padding-right:8px!important;	
}
.content-wrap {
	border-radius: 3px;
	background: none repeat scroll 0% 0% #FFF;
	margin-bottom: 20px;
	box-shadow: 0px 1px 1px 0px #C8CACD;
	padding: 30px;	
	margin-top: 40px;
}


/* BOOTSTRAP CUSTOM CSS OPTIONS --------- START */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: #fff!important;
  color:#2b669a!important;
}
/* BOOTSTRAP CUSTOM CSS OPTIONS --------- END */
img{
max-width:100%;
}
h1{
font-size:24px!important;
}
.span7 img{
max-width:70%!important;
}

.visible{
display:block;
}
.invisible{
display:none;
}
.left {
float:left;
}
.right {
float:right;
}
.message-badge{
background:#df9a2d!important;
}



body{
webkit-font-smoothing: antialiased!important;
    -moz-osx-font-smoothing: grayscale!important;
font-family:'Lato';
overflow-x:hidden;
}

.cover-btn{
position:absolute;
z-index:3;
margin-left:20px;
margin-top:20px!important;
}
   .bicubic {
            -ms-interpolation-mode: bicubic;
            image-rendering: optimizeQuality;
        }
        .nearest {
            -ms-interpolation-mode: nearest-neighbor;
            image-rendering: optimizeSpeed;
        }
/* General Demo Style */
.news-box{

}
span.sort{
margin-right:7px;
}
.btn-group{
margin-left:1%;
margin-bottom:-20px;
margin-top:10px;
}
.grid li:hover  .category-tag{
display:block;
opacity:1;
  transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -webkit-transition: opacity .5s ease-in-out;
}
.grid li:hover  .user-tag{
display:block;
opacity:1;
  transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -webkit-transition: opacity .5s ease-in-out;
}
.category-tag{
background:#000;
position:absolute;
color:#fff!important;
padding:4px;
margin:6px;
padding-left:8px;
padding-right:8px;
font-size:15px;
 border-radius:3px 3px 3px 3px;
-moz-border-radius:3px 3px 3px 3px;
-webkit-border-radius:3px 3px 3px 3px;
text-transform:uppercase;
opacity:0.6;
}

body.modal-open {
    overflow: visible!important;
z-index:10000;
}
img.nofeature { 
-webkit-filter: grayscale(100%); filter: grayscale(100%); 
}


button{
outline:none!important;
}
img { -ms-interpolation-mode: bicubic; image-rendering: -moz-crisp-edges; }
#wrapper{
max-width:1180px;
margin:0 auto;
z-index:1;
margin-top:15px;
}
#profile-info-settings{
display:none;
}
.expander{
cursor:pointer;
}
/* Color boxes - START */
.info-box{
width:30px;
height:30px;
padding:8px;
color:#fff;
margin-right:10px;
font-size:16px;
}

.info-text{
font-size:14px;
}

/* HEADER - START */
#header{
background:#2b669a;
height:50px;
width:100%;
position:fixed;
display:block;
z-index:9999;
-moz-box-shadow:0 1px 1px rgba(182, 182, 182, 0.75);
-webkit-box-shadow: 0 1px 1px rgba(182, 182, 182, 0.75);
box-shadow: 0 1px 1px rgba(182, 182, 182, 0.75);
}
#logo{
float:left!important;
margin-left:5px;
margin-top:-7px;
max-width:200px;
}
img#logo{
width:auto!important;
height:35px!important;	
}
img.very-small-img{
width:40px;
height:40px;
min-width:40px;
}
.img-thumbnail{
padding:2px!important;
}
.nav-link{
color:#fff!important;
  text-transform: uppercase;
  font-size:16px;
  margin-right:5px;
   margin-left:0px;
}
span.wide{
padding-right:8px;
}
/* HEADER - END */

/* TOP NAVIGATION - START */
#nav{
margin:0 auto;
}
#nav ul {
margin-top:0px;
margin-left:0px;
}
#nav ul li{ 
float:left;
list-style-type:none;
padding:10px;
padding-right:2px;
padding-top:0px!important;
margin-top:0px;
margin-left:0px;
margin-right:0px;
padding-bottom:0px!important;
color:#fff!important;
}
#nav ul li a{
  text-transform: uppercase;
  padding-top:0px;
  font-size:14px;
  color:#fff;
}
#nav ul li a:hover{
text-decoration:none;
}
li#more {
position: relative;
z-index:1;
}
li#more a{
height:35px;
display:block;
font-size:14px;
margin-top:0px!important;
padding-bottom:0px!important;
margin-bottom:0px!important;
}
#footer{
margin-left:15px;
}
#footer span.links{
color:#4e4e4e;
font-size:12px!important;
border-right: 1px solid #4e4e4e;
padding-left:3px;
padding-right:7px;
padding-top:0px;
padding-bottom:0px;
}
#footer span a{
color:#4e4e4e;
}
li#more:hover #more-categories{
display:block;
z-index:1;
overflow: hidden;
}

 li#last-page{
border-bottom:none!important;
}
#register-login{
margin-bottom:0px;
margin-right:10px;
position:relative;
margin-top:5px;
float:right;
}
#register-login li a{

}
a.nav-link{
padding-top:5px;
}
#header.dropdown-menu{
background:none!important;
}
ul#user-header{
margin-top:10px!important;
position:absolute;
margin-left:0px;
margin-bottom:0px!important;
}
ul#user-header li{
list-style-type:none;
padding:10px;
padding-left:0px;
padding-right:10px;
height:35px;
margin-left:0px;
margin-right:5px;
color:#333!important;
}
ul#user-header  li a{
  text-transform: none;
  font-size:13px;
  color:#333!important;
  padding-right:0px!important;
  display: inline-block;
}
ul#user-header  li a:hover{
  color:#2b669a!important;
}
/* TOP NAVIGATION - END */


/* SIDE CONTAINER - START */

#side-container span{
color:#2b669a;
}
.side-button-container{
margin-left:8px;
margin-right:20px;
}
.side-button{
width:100%;
}
span.side-title a{
padding-right:0px!important;
margin-right:20px!important;
margin-bottom:5px!important;
display:block;
font-size:13px;
color:#333;
}

#side-container iframe{
width:366px!important;
}
img.side-img{
margin-left:8px;
width:90px;
height:60px;
margin-right:12px;
float:left;
}
/* SIDE CONTAINER - END */

.modal-dialog{
color:#333;
}
.modal{
z-index:9999!important;
position:fixed;
}
.news-wrapper{
  display: inline-block;
  width: 100%;
  height: auto;
  margin-top:10px;
  z-index:2;
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

.news-container{
margin-left:20px;
margin-right:20px;
}

a.reedit{
margin-left:10px;
float:left;
}
.vote-container {
height:25px;
}
.vote-container span.reaction{
margin-left:10px!important;
font-size:20px!important;
}
.vote-container span{
margin-right:3px;
display:inline-box;
}
.dataTables_length{
margin-left:15px;
margin-top:15px;
margin-bottom:-10px!important;
display:none!important;
}
.dataTables_length select{
margin-top:15px!important;
}
.dataTables_info{
margin-left:15px!important;
}
.table-responsive{
overflow-x:hidden!important;
}
table>thead>tr>th{
border-bottom:1px solid #ddd!important;
}
#profile-container{
margin-left:20px;
margin-right:20px;
margin-top:30px;
z-index:2;
}
span#username{
color:#fff;
font-size:16px;
position:absolute;
margin-top:-70px;
margin-left:158px;
}
#profile-bg{
width:100%;
max-height:300px;
}
.follow{
position:absolute;
margin-left:150px;
margin-top:-15px;
}
.contact{
position:absolute;
margin-left:0px;
margin-top:30px;
}
.blocked{
position:absolute;
z-index:3;
margin-left:20px;
margin-top:20px!important;
}
 img#cover{
width:100%;
padding:5px;
margin-top:1px;
max-height:291px;
filter: sepia(0.2);
-webkit-filter: sepia(0.2);
-moz-filter: sepia(0.2);
-o-filter: sepia(0.2);
-ms-filter: sepia(0.2);
}
img#add-cover{
position:absolute;
margin-top:0px;
width:100%;
opacity:0.6;
margin-left:0px;
z-index:3;
}
#profile-img{
float:left;
margin-top:40px;
}
#profile-img img{
width:128px;
height:128px;
margin-top:-148px;
margin-left:15px;
position:absolute;
z-index:3;
}
.contact-img{
float:left;
width:80px;
height:80px;
margin-right:15px;
}
.user-news-column{
width: 25%;
float: left;
}

.user-news-box{
margin-right:15px;
}
span.user-news-title{
font-size:12px;
margin-top:-15px!important;
padding-top:0px!important;
display:inline-box;
}
#mainimg {
margin-bottom:10px;
max-width:100%;
margin-top:0px!important;
}

/* COLUMNS - START */
.full-column {
    width: 100%;
    float: left;
}
.two-third-column {
    width: 66.667%;
    float: left;
}

.one-third-column {
    width: 33.333%;
    float: left;
}

.three-quarter-column {
    width: 75%;
    float: left;
}

.one-quarter-column {
    width: 25%;
    float: left;
}

.four-fifth-column {
    width: 80%;
    float: left;
}

.one-fifth-column {
    width: 20%;
    float: left;
}

.half-column {
    width: 50%;
    float: left;
}
/* COLUMNS - END */



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

img#logo{
width:auto!important;
height:35px!important;
position:absolute!important;
  margin: auto!important;
    top: 0!important;
    left: 0!important;
    right: 0!important;
    bottom: 0!important;	
}	

#register-login{
display:none;
}
img#small-logo{
position:absolute;
  margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
ul#user-header{
margin-left:-48px;
}

#nav{
display:none;
}

    #mobile-nav {
        margin-left: 0px;
        margin-right: 0px;
		margin-top:9.3px!important;
        display: block;
		z-index:9999;
		width:100%;
    }

    span#small-navigation {
        color: #fff;
        padding-top: 15px;
        padding-left: 10px;
        display: inline-block;
    }

    img#nav-image {
        margin-left: 10px;
        margin-top: 2px;
		margin-bottom: 5px;
  	float:none!important;
    }
	  #mobile-nav-link {
  z-index:-1;
    }

    #mobile-nav-link ul {
        margin-bottom: 10px;
		margin-top:10px;
		background:#fff;
	   border-bottom:3px solid #2b669a;
    }

    #mobile-nav-link ul li {
        list-style-type: none;
			float:none!important;
        color: #fff;
		display:block;
        margin-left: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: 0px;
        border-bottom:1px dashed #333;
        padding-left: 10px;
		margin-left:0px!important;
        margin-bottom: 0px;
		cursor:pointer;
    }     
	#mobile-nav-link ul li:last-child {
      border-bottom:none!important;
    }
    #mobile-nav-link ul li:hover {
    background: #eee;
    text-decoration:none;
    }
	#mobile-nav-link ul li a:hover {
    text-decoration:none;
    }

    #mobile-nav-link ul li a {
        color: #fff;
		 font-size:16px;
		 display:block;
		 width:100%;
		 height:20px;
    }

    #mobile-subnav-link ul {
        margin-bottom: 0px;
    }

    #mobile-subnav-link ul li a {
        padding-left: 7px;
    }
	.mobile-user{
	position:absolute!important;
	float:right!important;
	right:20px!important;
	display:block;
	top:10px;
	}
}
@media screen and (max-width: 1024px) {
.btn-group {
margin-bottom:8px!important;
}
	#side-container iframe{
width:96%!important;
}
#profile-container{
margin-left:10px;
margin-right:10px;
margin-top:30px;
z-index:2;
}
.news-wrapper{
}
/* COLUMNS - START */
.full-column,.two-third-column,.one-third-column,.three-quarter-column,.one-quarter-column,.four-fifth-column,.one-fifth-column,.half-column {
    width: 100%;
    float: left;
}
/* COLUMNS - END */
.news-container{
margin-left:10px;
margin-right:10px;
}
}
@media only screen and (max-width: 768px) {
img#logo{
width:auto!important;
height:30px!important;
position:absolute!important;
  margin: auto!important;
    top: 0!important;
    left: 0!important;
    right: 0!important;
    bottom: 0!important;	
}	
	
.user-news-column{
width: 50%;
float: left;
}

}

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

span#username{
margin-left:108px;
}
img#small-logo{
    left: -30px;
	height:18px;
}
#profile-img img{
margin-top:-110px;
width:80px;
height:80px;
margin-left:15px;
position:absolute;
z-index:3;
}
img.add-profile-image{
display:none;
}

	.mobile-user{
	right:10px!important;
	margin-top:5px;
	}
ul#user-header{
margin-top:10px!important;
position:absolute;
margin-bottom:0px!important;
}
#user-nav{
margin-left:30px;
margin-top:-4px!important;
float:left;
z-index:9999;
}
#user{
display:none;
}
.user-news-column{
width: 100%;
float: left;
}
.btn-group{
margin-left:2%;
}
.three-quarter-column {
    width: 100%;
    float: left;
}
.one-quarter-column {
    width: 100%;
    float: left;
}
#side-container{
margin-left:10px;
margin-right:10px;
	margin-top:0px;
}
.news-container{
margin-left:10px;
margin-right:10px;
}
img.side-img{
width:100%;
margin-left:0px;
margin-bottom:8px;
height:auto;
float:none;
}
.suggested{
padding:8px;
font-weight:bold;
color:#fff;
background:#2b669a;
margin-right:0px;
margin-left:0px;
}
.side-button-container{
margin-left:0px;
margin-right:0px;
margin-top:0px;
}
}
/* MOBILE STYLE - START */

ul#mobile-grid li{
margin-left:-20px!important;
}

/* MOBILE STYLE - END */



img { 
image-rendering: auto!important;
-ms-interpolation-mode: bicubic; 
}
h1,h2,h3,h4,h5,h6,a,p,li{
-webkit-font-smoothing: antialiased!important;
  -moz-osx-font-smoothing: grayscale!important;
}
#nav ul li a{
-webkit-font-smoothing: antialiased!important;
  -moz-osx-font-smoothing: grayscale!important;
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
li#more a{
height:145px;
margin-top:0px!important;
padding-bottom:0px!important;
margin-bottom:0px!important;
}
span#username{
color:#fff;
font-size:16px;
position:absolute;
margin-top:-70px;
margin-left:58px!important;
}
 }

.opera span.opera-user{
            color:#fff;
            font-size:16px;
            position:absolute;
            margin-top:-70px;
            margin-left:20px!important;
    }
.gecko span.opera-user{
            color:#fff;
            font-size:16px;
            position:absolute;
            margin-top:-70px;
            margin-left:20px!important;
    }
	
	@font-face {
	font-family: 'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
	font-weight: normal;
	font-style: normal;
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
	color: #6b7381;
	background: #f2f2f2;
}

a {
	color: #aaa;
	text-decoration: none;
}

a:hover,
a:active {
	color: #333;
}

/* Header Style */

.container  {
max-width:100%;
}

.container > header {
	margin: 0 auto;
	padding: 2em;
}

.container > header {
	text-align: center;
	background: rgba(0,0,0,0.01);
}

.container > header h1 {
	font-size: 2.625em;
	line-height: 1.3;
	margin: 0;
	font-weight: 300;
}

.container > header span {
	display: block;
	font-size: 60%;
	opacity: 0.8;
	padding: 0 0 0.6em 0.1em;
}


.codrops-demos a:hover,
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
	opacity: 0.6;
}

@media screen and (max-width: 25em) {

	.codrops-icon span {
		display: none;
	}

}
/** * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) * Richard Clark (http://richclarkdesign.com) * http://cssreset.com */html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {    margin:0;    padding:0;    border:0;    outline:0;    font-size:100%;    vertical-align:baseline;    background:transparent;}body {    line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {    display:block;}nav ul {    list-style:none;}blockquote, q {    quotes:none;}blockquote:before, blockquote:after,q:before, q:after {    content:'';    content:none;}a {    margin:0;    padding:0;    font-size:100%;    vertical-align:baseline;    background:transparent;}/* change colours to suit your needs */ins {    background-color:#ff9;    color:#000;    text-decoration:none;}/* change colours to suit your needs */mark {    background-color:#ff9;    color:#000;    font-style:italic;    font-weight:bold;}del {    text-decoration: line-through;}abbr[title], dfn[title] {    border-bottom:1px dotted;    cursor:help;}table {    border-collapse:collapse;    border-spacing:0;}/* change border colour to suit your needs */hr {    display:block;    height:1px;    border:0;    border-top:1px solid #cccccc;    margin:1em 0;    padding:0;}input, select {    vertical-align:middle;}
/* GRID STYLE CSS ------- START */
.grid {
	list-style: none;
	margin: 30px auto;
	margin-left:0px;
	padding: 0;
}
.grid li.shown,
.no-js .grid li,
.no-cssanimations .grid li {
	opacity: 1;
}

.grid li a,
.grid li img {
	outline: none;
	border: none;
	display: block;
	max-width: 100%;
}

/* Effect 1: opacity */
.grid.effect-1 li.animate {
	-webkit-animation: fadeIn 0.65s ease forwards;
	animation: fadeIn 0.65s ease forwards;
}

@-webkit-keyframes fadeIn {
	0% { }
	100% { opacity: 1; }
}

@keyframes fadeIn {
	0% { }
	100% { opacity: 1; }
}

/* Effect 2: Move Up */
.grid.effect-2 li.animate {
	-webkit-transform: translateY(200px);
	transform: translateY(200px);
	-webkit-animation: moveUp 0.65s ease forwards;
	animation: moveUp 0.65s ease forwards;
}

@-webkit-keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

/* Effect 3: Scale up */
.grid.effect-3 li.animate {
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
	-webkit-animation: scaleUp 0.65s ease-in-out forwards;
	animation: scaleUp 0.65s ease-in-out forwards;
}

@-webkit-keyframes scaleUp {
	0% { }
	100% { -webkit-transform: scale(1); opacity: 1; }
}

@keyframes scaleUp {
	0% { }
	100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}

/* Effect 4: fall perspective */
.grid.effect-4 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-4 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
	transform: translateZ(400px) translateY(300px) rotateX(-90deg);
	-webkit-animation: fallPerspective .8s ease-in-out forwards;
	animation: fallPerspective .8s ease-in-out forwards;
}

@-webkit-keyframes fallPerspective {
	0% { }
	100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

@keyframes fallPerspective {
	0% { }
	100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

/* Effect 5: fly (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-5 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-5 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 50% 50% -300px;
	transform-origin: 50% 50% -300px;
	-webkit-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
	-webkit-animation: fly .8s ease-in-out forwards;
	animation: fly .8s ease-in-out forwards;
}

@-webkit-keyframes fly {
	0% { }
	100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@keyframes fly {
	0% { }
	100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
}

/* Effect 6: flip (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-6 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-6 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	-webkit-transform: rotateX(-80deg);
	transform: rotateX(-80deg);
	-webkit-animation: flip .8s ease-in-out forwards;
	animation: flip .8s ease-in-out forwards;
}

@-webkit-keyframes flip {
	0% { }
	100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@keyframes flip {
	0% { }
	100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
}

/* Effect 7: helix (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-7 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-7 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	-webkit-animation: helix .8s ease-in-out forwards;
	animation: helix .8s ease-in-out forwards;
}

@-webkit-keyframes helix {
	0% { }
	100% { -webkit-transform: rotateY(0deg); opacity: 1; }
}

@keyframes helix {
	0% { }
	100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; }
}

/* Effect 8:  */
.grid.effect-8 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-8 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: scale(0.4);
	transform: scale(0.4);
	-webkit-animation: popUp .8s ease-in forwards;
	animation: popUp .8s ease-in forwards;
}

@-webkit-keyframes popUp {
	0% { }
	70% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(1); opacity: 1; }
}

@keyframes popUp {
	0% { }
	70% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
/* GRID STYLE CSS ------- END */

/*! jQuery UI - v1.10.0 - 2013-01-30
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.datepicker.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS%2CTahoma%2CVerdana%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=02_glass.png&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=08_diagonals_thick.png&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=08_diagonals_thick.png&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=01_flat.png&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
* Copyright (c) 2013 jQuery Foundation and other contributors Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-clearfix {
	min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter:Alpha(Opacity=0);
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
}


/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month-year {
	width: 100%;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 49%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	padding: .2em .6em .3em .6em;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}

/* Component containers
----------------------------------*/
.ui-widget {
	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
	font-size: 1.1em;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
	font-size: 1em;
}

.ui-widget-content a {
	color: #333333;
}
.ui-widget-header {
	border: 1px solid #e78f08;
	background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;
	color: #ffffff;
	font-weight: bold;
}
.ui-widget-header a {
	color: #ffffff;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border: 1px solid #cccccc;
	background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
	font-weight: bold;
	color: #1c94c4;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
	color: #1c94c4;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid #fbcb09;
	background: #fdf5ce url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x;
	font-weight: bold;
	color: #c77405;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
	color: #c77405;
	text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border: 1px solid #fbd850;
	background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
	font-weight: bold;
	color: #eb8f00;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #eb8f00;
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #fed22f;
	background: #ffe45c url(images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x;
	color: #363636;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #363636;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #cd0a0a;
	background: #b81900 url(images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
	color: #ffffff;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #ffffff;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #ffffff;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	filter:Alpha(Opacity=70);
	font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	filter:Alpha(Opacity=35);
	background-image: none;
}
.ui-state-disabled .ui-icon {
	filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
/*!
 *  Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */