@import url("https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900|Montserrat:200,300,400,400i,500,500i,600,700,800,900|Open+Sans:300,400,400i,600,700,800");
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,600i,700");
@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,400i,500,500i,700,700i,900");


body {
    font-family: 'Open Sans', sans-serif;
    font-weight:100;
    line-height:28px;
    color: #212121;
	font-size:16px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.head-title {
 font-family: 'Montserrat', sans-serif;

}

h1,
h2,
h3,
h4,
h5,
h6 {
color: #000;
font-weight:500;
line-height: 1.2;
}

h1 {
font-size: 45px;
margin-bottom: 0.67em;
}

h2 {
font-size: 36px;
margin-bottom: 0.5em;
}

h3 {
font-size: 30px;
margin-bottom: 0.6em;
margin-top: 1em;
}

h4 {
    font-size: 20px;
    margin-bottom: 0.6em;
    margin-top: 1.33em;
}

h5 {
font-size:18px;
    /* margin-bottom: 10px; */
margin-top: 20px;
}

h6 {
font-size: 16px;
margin-bottom:5px;

}

.m-title {
    font-size:34px;
    line-height: 1;
    font-weight: 300;
}



.m-primary-color {
    color: #ff5e14;
}

.m-primary-bg {
    background-color: #269a47;
}

.m-secondary-color {
    color: #06163a;
}

.m-secondary-bg {
    background-color: #269a47;
}

.footer-bg {
background-color: #269a47;
}

.tertiary-color {
    color: #e4eaf7;
}

.tertiary-bg {
    background-color: #e4eaf7;
}

a {
    color: #000;
}

a:hover,
a:focus {
color: #00601b;
text-decoration: none;
}


.inner-services{
padding:0px;
/*margin-top:10px;*/
}

.serivece-panel{
margin-bottom:30px;
display: inline-block;
/*padding: 15px; */
/*display: flow-root;*/
/* border: 1px solid #f1f1f1; */
/* background-color: #f9f9f9; */

}

.ser-img{
overflow: hidden;
display: inline-block;
float: left;
margin-right:34px;
margin-bottom:10px;
}

.ser-text{
font-size:16px;
line-height:24px;
    overflow: hidden;
}
.ser-text h4{
font-size:16px;
font-weight:600;
margin-bottom:5px;
margin-top: 0px;
}

.ht-box{
margin-bottom:15px;
}

.get-quote-form h2 {
color: #fff!important;
line-height:55px;
background-color: rgba(60, 180, 8, 0.8);
padding: 0 15px;
margin: 0;
font-size: 24px!important
}

.get-quote-form h4 {
color: #fff!important;
line-height:46px;
padding: 0 15px;
margin: 0;
font-size:19px!important;
text-transform:uppercase;
}

.get-quote-form h3 {
color: #fff!important;
line-height:46px;
background-color: rgba(60, 180, 8, 1);
padding: 0 15px;
margin: 0;
font-size:19px!important;
text-transform:uppercase;
}

.get-quote-form form {
border:1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
background-color: #fff;
padding: 0 10px;
padding-bottom:15px;
}

.get-quote-form form div {
padding-top:20px
}

.highlight{
background-color:#cfefd8;
padding:10px;
}


.wdth50{
width:50%;
text-align:center;
margin:auto;
margin-top:10px;
}

.wdth40{
width:40%;
text-align:center;
margin:auto;
margin-bottom:10px;
font-weight:bold;
}

.wdth_40 {
width: 40%;
display: inline;
}

.wdth_20 {
width:20%;
display: inline;
}


.wdth20{
width:20%;
text-align:center;
margin:auto;
margin-top:10px;
}


.circle-intro {
margin:0px 0
}

.circle-intro i {
    display: inline-block;
    background-color:#fff;
    color: #000;
    font-size: 28px;
    padding: 15px 10px;
    text-align: center;
    width:65px;
    height:65px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
	border:dashed 1px #9c9c9c;
	
}



/*************** Toggles & Accordion ***************/

.img-thumbnail {
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding:0px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 0px solid #ddd;
    border-radius: 0px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	}

.panel-default > .panel-heading {
	background-color: #fff;
}

.panel-group .panel {
	border-radius:0px;
	-webkit-border-radius:0px;
    -moz-border-radius:0px;
    -o-border-radius:0px;
}

.panel-default {
	border-color: #e8e8e8;
}
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border:0px solid transparent;
    border-radius:0px;
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.05);
    box-shadow: 0 0px 0px rgba(0,0,0,.05);
}

.panel-body {
	padding: 4px 0px 10px 0px;
	font-size: 16px;
    line-height: 26px;
    font-family: 'Open Sans', sans-serif;
    font-weight:300;
}

.panel-heading {
	padding: 0;
}

.panel-title {
	font-size: 17px;
	font-weight: 400;

}

.panel-title a {
	position: relative;
	display: block;
	padding:5px 0px;
	background-color: #fff;
	box-shadow: none;
	-o-box-shadow: none;
	-moz-box-shadow: none;
  	-webkit-box-shadow: none;
	transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
	border-bottom:solid 1px #ddd;
	margin-bottom:5px;
	color:#269a47;
	text-transform:uppercase;
	font-size:15px;
    font-weight: 600;
}



.panel-title a.collapsed {
	color: #000;
	box-shadow: 0 0 0px rgba(0,0,0,.04) inset;
	-o-box-shadow: 0 0 0px rgba(0,0,0,.04) inset;
	-moz-box-shadow: 0 0 0px rgba(0,0,0,.04) inset;
  	-webkit-box-shadow: 0 0 0px rgba(0,0,0,.04) inset;
}

.panel-title a.collapsed:hover {
	color: #666;
}

.panel-title a .control-icon {
	position: absolute;
	top: 50%;
	right:0px;
	margin-top: -11px;
	transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.panel-title a.collapsed .control-icon {
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
}

.panel-title a i {
	font-size: 1.2em;
    padding-right:0px;
}

.panel-default > .panel-heading + .panel-collapse .panel-body {
	border-top: none;
}

.no-padding{
padding-left:0px;
padding-right:0px;
}

/*------------------------------------------*/
/*			   08 - Blog Styles
/*------------------------------------------*/
.blog_content{
padding:0px;
font-size:16px;
line-height:24px;
}

.blog_content p{
font-size:16px;
line-height:24px;
}

.blog-post {
margin-bottom:20px;
padding-bottom:0px;
border-bottom: 1px solid #eee;
}

.blog-post-detail {
margin-bottom:20px;
clear:both;
}

.blog-post-detail img {
width:100%
}

.blog-post-detail h4{
font-size:18px;
margin:0px;
}

.blog-post-detail p {
font-weight: 100;
line-height: 26px;
font-size: 16px;
}

.blog-post .post-head {
overflow: hidden;
position: relative;
margin-bottom:10px;
}

.blog-post .post-head img {
	max-width: 100%;
	height: auto;
	border-radius:0px;
	-webkit-border-radius:0px;
    -moz-border-radius:0px;
    -o-border-radius:0px;
}

.blog-post .post-content {
	padding-left:0px;
	position: relative;
}

.blog-post .post-content a{
font-size: 14px;
color: #269a47;
font-weight: 500;
font-style:normal;
transition: all 0.2s;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
}

.blog-post .post-content a:hover{
color: #000;
margin-left:6px;
}


.blog-post .post-type {
	position: absolute;
	left: 0;
	top: 5px;
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	background-color: #444;
	border-radius: 2px;
	-webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
}



.post-content h2 {
	margin-bottom: 4px;
	font-size:18px;
}

.post-content h2 a {
	color: #000;
	font-weight: 500;
	transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
	font-size:20px;
}

.blog-post.quote-post .qoute-box {
	background: #444;
	border-radius: 2px;
	-webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
	padding: 20px 25px;
	color: #fff;
	margin-bottom: 10px;
}

.blog-post.quote-post .qoute-box a {
color: #999;
}

.widget-popular-posts{
padding:0px;
margin:0px;
}
.widget-popular-posts h4{
font-size: 18px;
padding:0px;
margin:0px;
border-bottom:solid 2px #269a47;
padding-bottom:5px;
}


.post-content p {
margin-bottom:5px;
font-weight: 100;
line-height: 24px;
font-size: 15px;
}

.widget-popular-posts{
padding:0px;
margin:0px;
}

.widget-thumb {
float: left;
margin-right: 8px;
}

.widget-thumb img {
	width: 65px;
	height:45px;
	opacity: 1;
	transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.widget-content h5 {
    font-size: 14px;
    line-height:20px;
    margin-bottom: 5px;
    font-weight:300;
	font-family:'Open Sans', sans-serif;
}

/*Pagination*/
#pagination span, #pagination a {
	display: inline-block;
	text-align: center;
	height: 34px;
	width: 34px;
	color: #666;
	line-height: 33px;
	border: 1px solid #eee;
	border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
	transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

#pagination span.current {
	color: #fff;
}

#pagination a:hover {
	border-color: #ddd;
}

#pagination .all-pages, #pagination .next-page {
	width: auto;
	padding: 0 14px;
}

.img-border{
padding: 6px;
border: solid 1px #f2f2f2;
}


.dropdown-list {
    height: 30px;
    border-radius: 0px;
    font-size: 14px;
    border: solid 1px #15712f;
    background-color: #269a47;
    color: #fff;
    padding-left: 5px;
    font-weight: 500;
    width: 100%;
}


 
 
 
04.14.12
Responsive Youtube Embed
Learn how to make YouTube Videos Responsive
JOHN SURDAKOWSKI

APR 14, 2012

Responsive YouTube Embed
Update: I was asked to write an article for .Net Magazine about the Responsive Youtube Embed and how to make YouTube Videos Responsive. The article is more depth, suggesting some alternatives for embedding responsive videos in your web designs. Check it out in issue # 247, available October 8th 2013.
Update 12/15/2016: This article has been updated to improve the quality since it was published. Also, the article mentioned above has also been released on CreativeBloq, on Responsive Youtube Embed.

Have you ever tried to make a YouTube video responsive? If so, it can be somewhat tricky. I came across a small problem when adding a video from YouTube to one of my blog posts about the Childish Gambino website that we created. Since this website is fully responsive, I needed the YouTube video to re-size depending on the browser size or device width. However, when I added the embed code, the video had a fixed height and width. (uggh!) This looked fine on desktop computers, but pretty much broke the design when viewing on a mobile device. I wanted to know how to make a youtube video mobile. Therefore, we needed a responsive YouTube embed code. One would think that videos that with 100% width would automatically resize to the surrounding container. Well, that is not the case. Surprisingly, Youtube does not automatically have a responsive embed code.

The fix was actually quite simple. Here’s how to make a youtube video mobile:

You will need to wrap the responsive youtube embed code with a <div> and specify a 50% to 60% padding bottom. Then specify the child elements (iframe, object embed) 100% width, 100% height, with absolute position. This will force the embed elements to expand fullwidth automatically. Awesome! Exactly what we need.

First you will need to add the following to your style sheet.


.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.sub-title{
font-size:18px;
padding: 0px;
border-bottom:solid 1px #e6e6e6;
border-left: solid 2px #269a47;
padding-bottom: 5px;
margin-top:10px;
margin-bottom:15px;
padding-left: 10px;
font-weight:600;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
}

.pad-lt40{
padding-left:30px;
}

.sr-list{
font-size: 16px;
font-weight: 300;
line-height: 30px;
}

.sr-list li a {
display: inline-block;
    padding: 4px 10px;
    background: #f3fff6;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 15px;
    color: #000;
    float: left;
    margin-right: 10px;
    border: solid 1px #e5f4e9;
    margin-bottom: 10px;
}


.sr-listt li.current a,
.sr-list li a:hover {
background: #269a47;
color: #fff;
padding:4px 10px; 
}

.hotel{
margin-top:20px;
}
.hotel p{
font-size:16px;
}