/*
    Document   : 50 Post Blog Series Landing Page
    Created on : 2017
    Author     : Greg Skloot
*/

/* Global formatting */

html {
/*	overflow:auto;
*/	overflow-y: scroll;

}

body {
	
}

.clear {

	clear: both;
}


.center {

	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.left {
	float: left;
}

@font-face {

    font-family: "Avenir-regular";
    src: url("../fonts/avenir-next-regular.woff") format('woff');
}

@font-face {

    font-family: "Avenir-bold";
    src: url("../fonts/avenir-next-bold.woff") format('woff');
}

@font-face {

    font-family: "Avenir-thin";
    src: url("../fonts/avenir-next-thin.woff") format('woff');
}

/* ------------ */

/* Large background image on Home screen */

#home_top {
	width: 100%;
	text-align: center;
	padding-top: 55px;
	position: relative;
    margin-bottom: 50px;
    padding-bottom: 50px; 
    /*height: 1450px;*/
}

.footer {

	margin-left: auto;
	margin-right: auto;
	margin-bottom: 60px;
	margin-top: 50px;
	text-align: center;
	font-family: 'Avenir-thin', sans-serif;
	font-weight: 300;
	font-size: 12px;
	color: #b3b3b3;
	position: absolute;
/*	bottom: 0;
*/	width: 100%;

}

/* logo - text */

#home_top .title {

	color: #ff8e2e;
	font-size: 80px;
	font-family: 'Avenir-bold', sans-serif;
	line-height: 100px;
}

/* subtitle - text */

#home_top .subtitle {

	float: none;
	margin-right: auto;
	margin-left: auto;
	color: #7b7b7b;
	font-weight: 200;
	font-size: 43px;
	font-family: 'Avenir-thin', sans-serif;
}

/* by line */

#home_top .byline {

	margin-right: auto;
	margin-left: auto;
	width: 195px;
	color: #7b7b7b;
	font-weight: 300;
	font-style: italic;
	font-size: 20px;
	text-align: center;
	font-family: 'Avenir-thin', sans-serif;
	margin-top: 40px;
}

/* description */

.description {

	margin-bottom:30px;
	width:691px;
	margin-left:auto;
	margin-right:auto;
	font-family: 'Avenir-thin', sans-serif;
	color: #fff;
	font-size: 16px;
}

/* filters */

.container_filter {

	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding:30px 0px 30px 0px;
	text-align: center;
	margin-top: 40px;
	background-color: #666; 
}

.container_filter > button {

	color: #fff;
	font-family: 'Avenir-regular', sans-serif;
	font-size: 17px;
	text-align: center;
	padding: 6px 6px 6px 6px;
	border-radius: 3px;
	border:1px solid #ccc;
	margin-right: 13px;
	background-color: #666;

}

.button.is-checked {

  	padding: 5px 5px 5px 5px;
	border-radius: 3px;
	background-color:#ff8e2e;
	border: 1px solid #ff8e2e;
	color: #fff;
	margin-right: 13px;

}

.button:active {
}

button:focus {

	outline:0;

}

.button:hover {

  background-color: #ff8e2e;
  color: #fff;
  cursor: pointer;

}

/* ---- isotope ---- */

* { 
	box-sizing: border-box; 
}

.grid {

  width: 950px;
  margin-top: 30px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;

}


/* clear fix */
.grid:after {

  content: '';
  display: block;
  clear: both;
}

/* ---- button-group ---- */

.button-group:after {

  content: '';
  display: block;
  clear: both;
}

.button-group .button {

  margin-left: 0;
}

.button-group .button:first-child {  }
.button-group .button:last-child {  }


/* ---- .element-item ---- */

.element-item {

  position: relative;
  margin-top: 20px;
  display: inline-block;
}

.element-item > * {

  margin: 0;
  padding: 0;
}

.element-item:hover > .row_label { 

  background-color: #ff8e2e;
  color: #fff;
  cursor: pointer; 
 }

.element-item:hover > .row_title { 

  background-color: #fdbe88;
  color: #fff;
  cursor: pointer; 
 }

/* row concept */

.row_container {

	width: 950px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

.row_label {

	width: 40px;
	float: left;
	background-color: #a4ddfe;
	border-bottom-left-radius: 7px;
	border-top-left-radius: 7px;
	font-size:18px;
	font-family: 'Avenir-bold', sans-serif;
  	vertical-align: middle;
  	color: #fff;
  	line-height: 52px;
}

.row_title {

	float:left;
	width: 182px;
	border-top: 1px dotted #a4ddfe;
	border-bottom: 1px dotted #a4ddfe;
	border-right: 1px dotted #a4ddfe;
	line-height: 50px;
	border-bottom-right-radius: 7px;
	border-top-right-radius: 7px;
	text-align: left;
	font-size:16px;
	font-family: 'Avenir-regular', sans-serif;
  	vertical-align: middle;
  	color:#69c4f9;
  	padding-left: 20px;
  	background-color: #f5fbff; 
}

.container_row_number {
	float:right;
	margin-right:10px;
	}


.row_number {
	border-radius:50%;
	border: 1px dotted #a4ddfe; 
	background-color: #eaf5fd;
	margin-top:13px;
	margin-bottom:10px;
	width:25px;
	height:25px;
	text-align:center;
	line-height:25px;
	padding-left: 2px;
	font-size: 12px;
}



/*Custom links*/

a.byline_link:link {color: #7b7b7b;text-decoration:none;border-bottom:1px dotted #fff;}
a.byline_link:active {color: #7b7b7b;border-bottom:1px dotted #fff;}
a.byline_link:visited {color: #7b7b7b;border-bottom:1px dotted #fff;}
a.byline_link:hover {color: #ff8e2e; border-bottom:1px dotted #ff8e2e;}

a.footer_link:link {color: #b3b3b3;text-decoration:none;border-bottom:1px dotted #b3b3b3;}
a.footer_link:active {color: #b3b3b3;border-bottom:1px dotted #b3b3b3;}
a.footer_link:visited {color: #b3b3b3;border-bottom:1px dotted #b3b3b3;}
a.footer_link:hover {color: #fdbe88; border-bottom:1px dotted #fdbe88;}



/* isotope */

.grid-item { 

	width: 300px;
	background-color: #ccc;
	margin-bottom: 10px; 
}

/* social share */

.socialbox_container {

	border: 1px dashed #b3b3b3;
	background-color: #fff;
	border-radius: 10px;
	font-weight: 300;
	margin-left: auto;
	margin-right: auto;
	padding: 35px 25px 35px 25px !important;
	text-align: center;
    margin-top: 60px;
    width: 510px;
	font-size:18px;
	font-family: 'Avenir-regular', sans-serif;
	color: #b3b3b3;
}

/* Share buttons */

.share_container {

	float:right;
}

.single {

	margin-bottom: 0px !important;
}

.twitter {

	font-family: 'Open Sans', sans-serif;
	font-size: 25px;
	font-weight: 300;
	padding:10px 20px 10px 20px;
	border-radius: 10px;
	color: #fff;
	background-color: #45A4EC;
	float: right;

}

.twitter_small {

	background-color: #45A4EC;
	padding: 10px;
	border-radius: 10px;
	color: #fff;
	margin-right: 7px;
	margin-left: 7px;
}

.twitter > i {

	margin-right: 10px;
}

.twitter_small > i {

	margin-right: 5px;
}

.twitter:hover {

  box-shadow: 0px 0px 0px 5px rgba(69,164,236,0.3);       
}

.twitter_small:hover {

  box-shadow: 0px 0px 0px 5px rgba(69,164,236,0.3);       
}

.facebook {

	font-family: 'Open Sans', sans-serif;
	font-size: 25px;
	font-weight: 300;
	padding:10px 20px 10px 20px;
	border-radius: 10px;
	color: #fff;
	background-color: #2e48a7;
	float: right;
	margin-left: 20px;
}

.facebook_small {

	background-color: #2e48a7;
	padding: 10px;
	border-radius: 10px;
	color: #fff;
	margin-left: 7px;
	margin-right: 10px;
}

.facebook > i {

	margin-right: 10px;
}

.facebook_small > i {

	margin-right: 5px;
}

.facebook:hover {

	box-shadow: 0px 0px 0px 5px rgba(46,72,167,0.3);       
}

.facebook_small:hover {

	box-shadow: 0px 0px 0px 5px rgba(46,72,167,0.3);       
}

/* Responsive - share buttons */

@media (max-width: 667px) {

	.facebook_small {

		padding: 5px;
		display: block;
		margin-right: 0px;
		margin-left: 0px;
	}

	.twitter_small {

		padding: 5px;
		display: block;
		margin-right: 0px;
		margin-left: 0px;
		margin-bottom: 10px;
		margin-top: 10px;
	}
}

@media (max-width: 660px) {

	.socialbox_container {

		float:none;
		text-align: center;
		clear: both;
		padding-top: 40px;
	}

	.twitter {

		float: none;
		margin-bottom: 10px;
	}

	.facebook {

		float: none;
		margin-left: 0px;
		margin-bottom: 20px;
	}

}

/* iPhone 5 */
@media (min-width: 0px) and (max-width: 375px) {

	.grid {

		width: auto;
	}

	.description {

		width: auto;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 20px;
		font-size: 18px;
	}

	.socialbox_container {

		width: auto !important;
		position: relative;
		margin: -1850px 20px 0px 20px !important;
		font-size: 17px;
	}

	.marginTop300 {
		margin-top: 300px !important;
	}

	.footer {

		margin: 60px 20px 60px 20px !important;
		width: auto !important;
	}

	.row_title {

		padding-left: 50px;
		margin-right: 0px;
	}

	#home_top .title {

		font-size: 56px;
		line-height: normal;
		margin-bottom: 40px;
	}

	.button {

		margin-top: 10px;
	}

	.container_filter {

		padding-top: 10px;
		padding-left: 10px;
    	padding-right: 10px;
	}

	.element-item {

		margin-left: auto;
    	margin-right: auto;
    	text-align: center;
    	display: inline-block;
    	position: relative !important;
    	float: none !important;
    	top: 0px !important;
	}

	.row_label {

		width: 63px !important;
		line-height: 48px !important;
		font-size: 22px !important;
	}

	.row_title {

		width: 210px !important;
		font-size: 16px !important;
		line-height: 46px !important;
		padding-left: 20px !important;
		margin-right: 0px !important;
	}

	.subtitle {

		padding-left: 10px;
		padding-right: 10px;
		font-size: 35.5px;
	}
}

/* iphone 6 plus */

@media (min-width: 376px) and (max-width: 414px) {

	.grid {

		width: auto;
	}

	.description {

		width: auto;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 20px;
	}

	.socialbox_container {

		width: auto !important;
		margin: 300px 20px 0px 20px !important;
	}

	.footer {

		margin: 60px 20px 60px 20px !important;
		width: auto !important;
	}

	.row_title {

		padding-left: 50px;
		margin-right: 0px;
	}

	#home_top .title {

		font-size: 70px;
		line-height: normal;
		margin-bottom: 40px;
	}

	.button {

		margin-top: 10px;
	}

	.container_filter {

		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.element-item {

		margin-left: auto;
   		margin-right: auto;
    	text-align: center;
    	display: inline-block;
    	position: relative !important;
    	float: none !important;
    	top: 0px !important;
	}

	.row_label {

		width: 63px !important;
		line-height: 62px !important;
		font-size: 30px !important;
	}

	.row_title {

		width: 290px !important;
		font-size: 19px !important;
		line-height: 59px !important;
		padding-left: 20px !important;
		margin-right: 0px !important;
	}
}

/* landscape - smartphones */

@media (min-width: 415px) and (max-width: 713px) {

	.grid {

		width: auto;
	}

	.description {

		width: auto;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 20px;
		font-size: 17px;
	}

	.socialbox_container {

		margin-top: 300px !important;
		margin-right: auto;
		margin-left: auto;
	}

	.footer {

		margin-top: 60px !important;
		margin-bottom: 60px !important;
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}

	.row_title {

		padding-left: 50px;
		margin-right: 0px;
	}

	#home_top .title {

		font-size: 80px;
		line-height: normal;
		margin-bottom: 40px;
	}

	#home_top .subtitle {

		padding-left: 20px;
		padding-right: 20px;
	}

	.button {

		margin-top: 10px;
	}

	.container_filter {

		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.element-item {

		margin-left: auto;
    	margin-right: auto;
    	text-align: center;
    	display: inline-block;
    	position: relative !important;
    	float: none !important;
    	top: 0px !important;
	}

	.row_label {

		width: 74px !important;
		line-height: 72px !important;
		font-size: 36px !important;
	}

	.row_title {

		width: 435px !important;
		font-size: 25px !important;
		line-height: 70px !important;
		padding-left: 20px !important;
	}
}

/* iPad - portrait  */

@media (min-width: 714px) and (max-width: 1000px) {

	.grid {

		width: auto;
	}

	.description {

		width: auto;
		padding-left: 40px;
		padding-right: 40px;
	}

	.socialbox_container {

		margin-top: 300px !important;
		margin-right: auto;
		margin-left: auto;
	}

	.footer {

		margin-top: 60px !important;
		margin-bottom: 60px !important;
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}

	.row_title {

		padding-left: 50px;
		margin-right: 0px;
	}

	#home_top .title {

		font-size: 70px;
		line-height: normal;
		margin-bottom: 20px;
	}

	#home_top .subtitle {

		font-size: 35px;
	}

	.button {

		margin-top: 10px;
	}

	.element-item {

		margin-left: auto;
    	margin-right: auto;
    	text-align: center;
    	display: inline-block;
    	position: relative !important;
    	float: none !important;
    	top: 0px !important;
	}

	.row_label {

		width: 97px !important;
		line-height: 66px !important;
		font-size: 31px !important;
		/*margin-left: 50px !important;*/

	}

	.row_title {
		
		width: 526px !important;
		font-size: 22px !important;
		line-height: 64px !important;
		padding-left: 20px !important;
	}

}