/* DETAILS
==================================================
	Theme Name: Dogtrainingforhappylife landing page
	Author: Onqanet Technologies
	Author URI: http://onqanet.com
==================================================
*/
/******************************MEDIA QUERIES***********************/
@media (min-width:2280px) {
    .container {
        width: 2100px;
    }
}

@media (min-width:1900px) {
    .container {
        width: 1700px;
    }
}

@media (min-width:1600px) {
    .container {
        width: 1400px;
    }
}

@media screen and (max-width: 1280px) {
.menu {
	/* display: none; */
	position: fixed;
	top: 0;
	left: -100%;
	right: 0;
	display: block;
	background: #000;
	z-index: 9999999;
	height: 100%;
	max-width: 240px;
	transition: all ease-in-out 0.5s;
	-webkit-transition: all ease-in-out 0.5s;
	-moz-transition: all ease-in-out 0.5s;
	-ms-transition: all ease-in-out 0.5s;
	-o-transition: all ease-in-out 0.5s;
}
.menu-toggle {
	color: #000;
	font-size: 24px;
	cursor: pointer;
	text-align: right;
	display:block;
}
.menu-toggle .fa {
	position: absolute;
	right: 25px;
	color: #fff;
	z-index: 999;
	background: #2c5008;
	padding: 5px;
	top: 30px;
}
.menu li {
	margin: 0;
	float: none;
	display: block;
	text-align: center;
}
.menu li a, .menu li a:hover {
	padding: 10px 0;
	color: #fff;
	font-size: 15px;
	text-align: center;
}
.menu > li > ul > li > ul {
	top: 100%;
	left: 0;
}
.bnr-txt h4 {
	font-size: 28px;
}
    .bnr-txt::after {
	top: 83px;
}
    .side-btn a {
	top: 32%;
}
    .wp {
	top: 52%;
}
    .abt-sec h4 {
	font-size: 23px;
	letter-spacing: 0px;
}
    .site-title h2 {
	font-size: 32px;
	letter-spacing: 3px;
}
    .bnf-txt {
	width: 64%;
}
    .bnf-txt h4 {
	font-size: 15px;
	letter-spacing: 0px;
}
    .crs-txt h4 {
	font-size: 18px;
}
    .bch-img img {
	height: 200px;
}
    .bch-img::after {
	height: 200px;
}
    .bch-btn {
	width: 62%;
}
    .bch-sec:hover .bch-btn {
	bottom: 80px;
}
    .bch-txt p {
	font-size: 18px;
	margin: 20px 0 20px 0;
}
    .ben-sec {
	width: 100% !important;
}
    .vtl h5, .vtr h5 {
	font-size: 22px;
	letter-spacing: 0px;
}
    .ft-a p {
	width: inherit;
}
.cont-no a {
    font-size: 23px;
    padding: 20px 20px;
}
}

@media screen and (max-width: 1100px) {}

@media screen and (max-width: 980px) {
    .hs li {
	padding: 0 4px;
}
    .wp {
	top: 47%;
}
    .container {
	max-width: 900px !important;
}
    .bnf-txt p {
	font-size: 13px;
}
    .bch-btn {
	font-size: 15px;
}
    .bch-sec:hover .bch-img::after {
	border: 30px solid #ffffffd4;
}
    .video {
	margin: 80px 0 90px 0;
}
    .fot {
	text-align: center;
}
    .ft-a p {
	text-align: center;
}
    .ft-a ul {
	text-align: center;
}

}

@media screen and (max-width: 850px) {
.container {
	max-width: 100% !important;
}
.menu {
	/* display: none; */
	position: fixed;
	top: 0;
	left: -100%;
	right: 0;
	display: block;
	background: #000;
	z-index: 9999999;
	height: 100%;
	max-width: 240px;
	transition: all ease-in-out 0.5s;
	-webkit-transition: all ease-in-out 0.5s;
	-moz-transition: all ease-in-out 0.5s;
	-ms-transition: all ease-in-out 0.5s;
	-o-transition: all ease-in-out 0.5s;
}
.menu-toggle {
	color: #000;
	font-size: 24px;
	cursor: pointer;
	text-align: right;
	display:block;
}
.menu-toggle .fa {
	position: absolute;
	right: 11px;
	color: #fff;
	z-index: 999;
	background: #2c5008;
	padding: 5px;
	top: 30px;
}
.menu li {
	margin: 0;
	float: none;
	display: block;
	text-align: center;
}
.menu li a, .menu li a:hover {
	padding: 10px 0;
	color: #fff;
	font-size: 15px;
	text-align: center;
}
.menu > li > ul > li > ul {
	top: 100%;
	left: 0;
}
    .wp {
	top: 75%;
}
    .logo {
	padding: 0px 0px;
}
    .head-btn a {
	margin: 0px 5px;
}
    .head-btn {
	padding: 8px 10px;
	margin: 30px 0;
}
    .bnr-txt h4 {
	font-size: 23px;
}
    .bnr-txt::after {
	top: 74px;
}
    .bnr-txt a {
	padding: 12px 15px;
	margin: 0 6px;
}
    .bnr-img {
	width: 50%;
	left: 0px;
}
    .bnr-txt {
	width: 44%;
	top: 17%;
}
    .cd-top {
	left: 10px;
}
    .abt-sec h4 {
	font-size: 20px;
	margin: 10px 0;
}
    .abt-sec p {
	font-size: 14px;
	line-height: 20px;
}
    .site-title h2 {
	font-size: 28px;
	letter-spacing: 1px;
    margin: 0 auto 20px;
}
    .bnf-txt {
	width: 100%;
	float: none;
	text-align: center;
}
    .bnf-img {
	width: 100%;
	float: none;
}
    .course .site-title h2 {
	margin: 10px auto 30px;
}
    .bch-btn {
	font-size: 12px;
}
    .batch .site-title h2 {
	margin: 0 auto 30px;
}
    .batch {
	padding: 30px 0 30px 0;
}
    .testi {
	padding: 30px 0 30px 0;
}
    .testi-wrap {
	width: 100% !important;
}
    .video-clas iframe {
	height: 460px;
	margin: -40px 0 0 0;
}
    .hlink ul {
	text-align: left;
}
    .hlink li {
	padding: 2px 12px;
}
    .hs li {
	padding: 0 2px;
}
    .logo {
	position: inherit;
	left: 40px;
	margin: 0 0 10px 0;
}
.abt-tx p {
    margin: 0;
}    
.cont-tx {
    margin-top: 40px;
}
.inn-gal img {
    width: 100%;
}
.hll{
    display: block !important;
        margin: 0 auto;
}
.hlink{
    display: none;
}
}
@media screen and (max-width: 812px) {

.container {
	max-width: 100% !important;
}
.menu {
	/* display: none; */
	position: fixed;
	top: 0;
	left: -100%;
	right: 0;
	display: block;
	background: #000;
	z-index: 9999999;
	height: 100%;
	max-width: 240px;
	transition: all ease-in-out 0.5s;
	-webkit-transition: all ease-in-out 0.5s;
	-moz-transition: all ease-in-out 0.5s;
	-ms-transition: all ease-in-out 0.5s;
	-o-transition: all ease-in-out 0.5s;
}
.menu-toggle {
	color: #000;
	font-size: 24px;
	cursor: pointer;
	text-align: right;
	display:block;
}
.menu-toggle .fa {
	position: absolute;
	right: 11px;
	color: #fff;
	z-index: 999;
	background: #2c5008;
	padding: 5px;
	top: 30px;
}
.menu li {
	margin: 0;
	float: none;
	display: block;
	text-align: center;
}
.menu li a, .menu li a:hover {
	padding: 10px 0;
	color: #fff;
	font-size: 15px;
	text-align: center;
}
.menu > li > ul > li > ul {
	top: 100%;
	left: 0;
}
    .wp {
	top: 75%;
}
    .logo {
	padding: 0px 0px;
}
    .head-btn a {
	margin: 0px 5px;
}
    .head-btn {
	padding: 8px 10px;
	margin: 30px 0;
}
    .bnr-txt h4 {
	font-size: 23px;
}
    .bnr-txt::after {
	top: 74px;
}
    .bnr-txt a {
	padding: 12px 15px;
	margin: 0 6px;
}
    .bnr-img {
	width: 50%;
	left: 0px;
}
    .bnr-txt {
	width: 44%;
	top: 17%;
}
    .cd-top {
	left: 10px;
}
    .abt-sec h4 {
	font-size: 20px;
	margin: 10px 0;
}
    .abt-sec p {
	font-size: 14px;
	line-height: 20px;
}
    .site-title h2 {
	font-size: 28px;
	letter-spacing: 1px;
    margin: 0 auto 20px;
}
    .bnf-txt {
	width: 100%;
	float: none;
	text-align: center;
}
    .bnf-img {
	width: 100%;
	float: none;
}
    .course .site-title h2 {
	margin: 10px auto 30px;
}
    .bch-btn {
	font-size: 12px;
}
    .batch .site-title h2 {
	margin: 0 auto 30px;
}
    .batch {
	padding: 30px 0 30px 0;
}
    .testi {
	padding: 30px 0 30px 0;
}
    .testi-wrap {
	width: 100% !important;
	margin: 0 auto !important;
}
    .video-clas iframe {
	height: 460px;
	margin: -40px 0 0 0;
}
    .hlink ul {
	text-align: left;
}
    .hlink li {
	padding: 2px 12px;
}
    .hs li {
	padding: 0 2px;
}
    .logo {
	position: inherit;
	left: 40px;
	margin: 0 0 10px 0;
}
.hline {
    width: 44%;
    margin: 0 auto;
}
}
@media screen and (max-width: 768px) {

    .menu-toggle .fa {
	right: 91px;
	top: -132px;
}
    .head-btn {
	width: 100%;
	margin: 10px auto;
}
    .logo {
	text-align: center;
}
    .bnr-txt {
	width: 50%;
	top: 17%;
	text-align: right;
	z-index: 99;
	right: 8%;
}
    .bnr-img {
	left: -30px;
}
    .abt-sec h4 {
	font-size: 18px;
}
    .crs-txt h4 {
	font-size: 15px;
}
    .bch-wrap {
	width: 50% !important;
}
    .vtl h5, .vtr h5 {
	padding: 10px 0px;
}
    .video {
	height: auto;
	background-size: cover;
    margin: 20px 0 20px 0;
}
    .video-clas iframe {
	height: 300px;
	margin: 0px 0 0 0;
}
    .logo {
	position: inherit;
	left: 40%;
	margin: 0 0 10px 0;
}
    .head-btn {
	width: 30%;
}
    .bnr-img {
	bottom: -50px;
}
.hline {
    width: 60%;
    margin: 0 auto;
}
    .fm-tx {
    margin: 30px 20px 0 0;
}
    .site-title {
    margin-bottom: 20px;
}
.hlink ul {
   text-align:center;
    margin: 0 auto;
}

}
@media screen and (max-width: 736px) {
    .abt-tx {
    margin-top: 20px;
    text-align: center;
}
    .circle-wrap:hover .circle:after {
    width: 109%;
    height: 88%;
    top: 39px;
    left: -8px;
}
.hlink {
    padding: 0 0 0 0;
}
}
@media screen and (max-width: 667px) {
.head-btn {
	width: 35%;
}
    .hline p {
	font-size: 13px;
}
    .side-btn a {
	padding: 12px 25px;
	font-size: 16px;
	right: -66px;
	top: 40%;
}
    .menu-toggle .fa {
	top: -152px;
}
    .bnr-txt h4 {
	font-size: 20px;
}
    .bnr-txt a {
	font-size: 13px;
}
    .bnf {
	margin: 10px 0;
}
    .cp p {
	letter-spacing: 0px;
}
.hline {
    width: 64%;
}
    .hs {
    text-align: center;
    padding: 5px 0 0 0;
}
    .fm-tx h4 {
    font-size: 24px;
    line-height: 31px;
        margin: 0;
    }
    .fm-tx {
    margin: 30px 0px 0 0;
}
    .ban-form-box {
    padding: 15px 15px;
}
    .ban-form-box h4 {
    font-size: 20px;
    }
    .ban-form-box p {
    font-size: 14px;
    line-height: 20px;
    }
    .ban-form input[type="text"], .ban-form input[type="tel"], .ban-form input[type="email"], .ban-form input[type="date"], .ban-form input[type="time"], .ban-form select, .ban-form textarea {
    margin: 5px 0;
    }
    .circle img {
    width: 63%;
}
    .pro-heading {
    font-size: 32px;
        margin-bottom: 0
    }
    .circle-wrap h4 {
    font-size: 20px;
    }
    .cont-d {
    padding: 70px 0;
}
    .circle-wrap:hover .circle:after {
    width: 70%;
    height: 80%;
    top: 41px;
    left: 30px;
}
.modal-title {
    margin-left: 0px;
}
}

@media screen and (max-width: 568px) {
.head-btn {
	width: 40%;
	margin: 0 auto 10px;
	left: 0;
}
    .hline p {
	text-align: center;
}
    .menu-toggle .fa {
	right: 10px;
}
    .bnr-txt h4 {
	font-size: 18px;
        margin: 
}
    .bnr-txt::after {
	top: 58px;
}
    .bnr-txt {
	width: 60%;
	top: 9%;
}
    .bnr-txt a {
	padding: 10px 10px;
	margin: 0 0px;
}
    .site-title h2 {
	font-size: 25px;
}
    .ben-img {
	margin: 10px 0 10px 0;
}
   .benefit::after {
        top: 37%;
        left: -92px;
}
    .hline {
    width: 53%;
    margin: 0 auto;
    margin-bottom: 20px;
}
    .fm-tx {
    margin: 30px 0px 30px 0;
    text-align: center;
}
    .circle {
    padding-top: 20px;
    }
    .mod-img {
    display: none;
}
    .circle-wrap:hover .circle:after {
    width: 71%;
    height: 97%;
    top: 12px;
    left: 30px;
}
    .fm-tx p {
    font-size: 18px;
    width: 100%;
}

@media screen and (max-width: 480px) {
.head-btn {
	width: 55%;
}
    .bnr-txt h4 {
	display: none;
}
    .bnr-txt::after {
	display: none;
}
.bnr-txt a {
	margin: 10px 0px;
	width: 90%;
	text-align: center;
}
    .bnr-txt {
	width: 40%;
	top: 14%;
}

    .cont-d {
    margin-top: 30px;
    }
    .circle-wrap:hover .circle:after {
    width: 70%;
    height: 95%;
    top: 14px;
    left: 30px;
}
    .ex-img {
    width: 40%;
    height: 95%;
    margin: 0 auto;
}
.hline {
    width: 96%;
}
}

@media screen and (max-width: 375px) {
.logo {
	left: 34%;
}
    .head-btn {
	width: 75%;
}
    .bnr-txt a {
	width: 100%;
	font-size: 12px;
}
    .bnr-img {
	bottom: -70px;
}
    .cp {
	padding: 10px;
}
 .pro-heading {
    font-size: 28px;
}
    .cont-no a {
    font-size: 25px;
    }
    .cont-tx h6 {
    font-size: 18px;
    }
    .cont-d {
    padding: 70px 0 30px 0;
}
    .modal-title {
    font-size: 16px;
    }
    .circle-wrap:hover .circle:after {
    width: 69%;
    height: 93%;
    top: 15px;
    left: 31px;
}
.ex-img {
    width: 40%;
    height: 80%;
    margin: 0 auto;
}
.hlink a {
    font-size: 16px;
}
.hline {
    width: 100%;
}
}