@import url("magic-bootstrap.css");
@import url("superslides.css");
@import url("owl.carousel.min.css");
@import url("owl.theme.default.min.css");
@import url("animate.css");
@import url("jquery.fancybox.css");
@import url("animate.css");
@import url("https://fonts.googleapis.com/css?family=Lato:400,900,400italic,900italic.css");
@import url("font-awesome.min.css");
@import url("school-icons.css");

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

[Master Stylesheet]

Project:			Smartway - Learning & Courses HTML Template
Version:			1.0
Last change:		20/10/2014
Author:				Coffeecream Themes
Assigned to:		Marcin Banaszek

------------------------------------------------------------------

[Color codes]

Body background:		#fff (white)
Brand color:			#8fb488 (green)
Text:					#888 (gray)
Header h1-h6:			#222 (dark gray)
Top tools background:	#323438 (darker graphite)
Main nav background:	#373a3e (graphite)
Footer background 1:	#373a3e (graphite)
Footer background 2:	#323438 (darker graphite)
Footer background 3:	#2c2f33 (dark graphite)
Course search:			#726253 (brown)
Reviews:				#8fb488 (green)
Newsletter background:	#89909a (blue)

a (standard):			#8fb488 (green)
a (visited):			#8fb488 (green)
a (active):				#8fb488 (green)
a (hover):				#81a27b (darker green)

------------------------------------------------------------------

[Table of contents]

1. Global Styles
2. Header
	2.1. Tools
	2.2. Navigation
3. Title
4. Home Page Banner
	4.1. Slider Offers
5. Content
	5.1. Sidebar
	5.2. Blog
	5.3. Carousels
	5.4. Masonry
	5.5. Courses
	5.6. Gallery
	5.7. Map
	5.8. Teachers
	5.9. Upcoming Exams
	5.10. Progress Bars
	5.11. Reviews
	5.12. Search Box
	5.13. Newsletter
	5.14. Services
	5.15. Responsive Video Wrapper
6. Links
7. Prefooter
8. Footer
9. Mobile Styles
	9.1. Regular Tablets
	9.2. Small Tablets
	9.3. Smartphones

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

/* 1. GLOBAL STYLES
-------------------------------------------------------------------*/

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



body {
	overflow-x: hidden;
	padding-top: 118px;
}

h1,h2,h3,h4,h5,h6 {
	text-transform: uppercase;
}

h2 {
	font-size: 1.6153em;
}

h1,h2 {
	font-weight: 900;
	margin: 0 0 30px 0;
}

h3 {
	margin: 8px 0px 0px 0px;           /* CHANGED */ 
	font-family: Lato;                /* CHANGED */ 
    font-weight: 700;                /* CHANGED */ 
    line-height: 1.5em !important;	/* CHANGED */ 
}

h2,h3,h4,h5,h6 {
	line-height: 1.74em;
}

b, strong {
	font-weight: 900;
}

a,
button {
	cursor: pointer;
	transition: all .5s ease;
	-moz-transition: all .5s ease;
	-webkit-transition: all .5s ease;
	-o-transition: all .5s ease;
}

	a:hover {
		text-decoration: none;
	}

section {
	    padding-top: 30px;            /* CHANGED */ 
        padding-bottom: 20px;       /* CHANGED */ 
}

blockquote {
	border: 0;
	color: #bbb;
	font-size: 1.3846em;
	font-style: italic;
	padding-left: 70px;
	position: relative;
}

label {
	font-weight: normal;
	margin-left: 1px;
}

iframe {
	border: 0;
}

.quote {
	font-size: 3em;
	left: 0;
	line-height: 1.5em;
	position: absolute;
	top: 0;
}

.btn,
.pagination > li > a {
	bor5der-width: 2px;           /* CHANGED */ 
	border-left: 0;
	border-right: 0;
	border-top: 0;
	font-weight: 900;
	text-transform: uppercase;
}

.pagination > li > a {
	border-radius: 3px;
	color: #fff;
	font-weight: 900;
	margin: 0 2px;
	text-transform: uppercase;
}

.alt-background {
	background: #f7f6f2;
}

.no-margin {
	margin: 0;
}

.icon {
	position: relative;
	top: 2px;
}

.lead .icon {
	display: inline-block;
	font-size: 1.5em;
	margin: 0 30px 30px 0;
}

.primary-color {
	color: #FF3333;
}

.caret {
	position: relative;
	top: -2px;
}

.fa-3x {
    font-size:1.6153em;  font-weight:600;

    color: #222222;

padding-top: 20px;

font-family: Lato;
}
  



/* 2. HEADER
-------------------------------------------------------------------*/

header {
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1000;
}

	header .nav .open > a,
	header .nav .open > a:hover,
	header .nav .open > a:focus {
		background: none;
		border: 0;
	}

	.fixed {
		position: fixed;
		top: -35px;
	}

	/* 2.1. TOOLS
	-------------------------------------------------------------------*/

	.to7ols original {
                background: #313438;
		
	}

               .tools {
			background: rgba(0,0,0,0.65);
                        
		}

		/* added below so tools matched  dropdown menu on mobile on all pages excluding homepage COMMENTED OUT as conflicting with normal tools so homepage version deactivated*/
		
		@media (max-width:767px) {
	
	  .tools {
			background: rgba(0,0,0,0.75);
                        
		}
	
}


		#hom3epage .tools {
			background: rgba(0,0,0,0.65);
                       
		}
		
		/* added below so tools matched  dropdown menu on mobile*/
		
		@media (max-width:767px) {
	
	  #ho3mepage .tools {
			background: rgba(0,0,0,0.75);
                       
		}
	
}
		
		
		
		.tools ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.tools li {
			display: inline;
		}

		.tools a {
			color: #d2d4d8;
		}

                 .tools .pull-right ul {
                  color: #d2d4d8;
		    }




		.tools a:hover {
			color: #fff;
		}

		.tools .pull-left a {
			margin-right: 20px;
                        
		}

		.tools .pull-right a {
			margin-left: 20px;
                        
		}

		.tools i {
			margin-right: 10px;
		}

	/* 2.2. NAVIGATION
	-------------------------------------------------------------------*/


.navbar-header { padding-bottom: 11px;
}

/* added below so header mobile is transparent */

@media (max-width:767px) {
	
	.navbar-header { 
	background:transparent;
}
	
}

/* added below so that new class  on header and tools (see settings.js) changes coior */

@media (max-width:767px) {

  .headerchange { 
background:rgba(0,0,0,0.75);
}
}


	.navbar-brand {		
             padding: 13px 15px 0px 15px;
	}

	.nav > li > a {
		font-weight: bold;
		padding-left: 10px;
		padding-right: 10px;
		text-transform: uppercase;

}

       .navbar-nav >li > a {
    padding-top: 41px;                      /* CHANGED */ 
    padding-bottom: 33px;
	word-spacing: 4px;                 /* CHANGED added so test your level not bizarrely all connected. */ 
}

/* added below to reduce padding menu mobile, add media query after default .navbar nav*/

@media (max-width:767px) {
	   .navbar-nav >li > a {
    padding-top: 15px;
    padding-bottom: 0px;
}
	
	
}



	#homepage .navbar-default {
		background: url(../images/header.png) repeat-x top;
		
		/* Transparent CSS gradient doesn't work in IE9 and below. */

		/* Remove this line if you want to use CSS gradient in stead of background image

		background: -moz-linear-gradient(top,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0)));
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
		background: -o-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
		background: -ms-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
		background: linear-gradient(to bottom,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=0 );

		Remove this line if you want to use CSS gradient in stead of background image */
		
		border: 0;
		display: block;
		min-height: 200px;
	}

	#homepage .fixed .navbar-default {
                background: rgba(0,0,0,0.75);
		ba4ckground: #373a3e;
		min-height: 85px;
                box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.13);
                transition: all 0.3s ease-in-out 0s;
	}

.navbar-default {
		background: url(../images/header.png) repeat-x top;
		
		/* Transparent CSS gradient doesn't work in IE9 and below. */

		/* Remove this line if you want to use CSS gradient in stead of background image

		background: -moz-linear-gradient(top,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0)));
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
		background: -o-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
		background: -ms-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
		background: linear-gradient(to bottom,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=0 );

		Remove this line if you want to use CSS gradient in stead of background image */
		
		border: 0;
		display: block;
		min-height: 200px;
	}
	

	 .fixed .navbar-default {
                background: rgba(0,0,0,0.75);
		bac6kground: #373a3e;
		min-height: 85px;
                box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.13);
                transition: all 0.3s ease-in-out 0s;
	}

	.navbar-nav .dropdown-menu {
		bac5kground: #2c2f33;
		border: 0;
		top: 105%;             /* changed to push dropdown below navbar */
	}

	/* comment out color above and change 75% to 85% so dropdown further away fron navbar */
	
	/* comment out color below add transparency rgba */
	
	
		.navbar-nav .dropdown-menu:before {
			background:rgba(0,0,0,0.60);          /* lighter than above to minimise double transparency darkening overlap of dropdown caret */
			bac5kground: #2c2f33;
			content: "";
			display: block;
			height: 10px;
			position: absolute;
			right: 30px;
			top: -5px;
			width: 10px;
			-ms-transform: rotate(45deg); /* IE 9 */
			-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
			transform: rotate(45deg);
		}

		.navbar-nav .dropdown-menu a {
			color: #89909a;
		}

			.navbar-nav .dropdown-menu a:hover,
			.navbar-nav .dropdown-menu > .active > a,
			.navbar-nav .dropdown-menu > .active > a:hover,
			.navbar-nav .dropdown-menu > .active > a:focus {
				background: none;
				color: #fff;
			}

			/* comment out below to remove dividers mobile */
			
		.navbar-nav .dropdown-menu .divider {
			bac4kground-color: #4b4e52;
		}
		
		
		/* add below new code so divider for mobile lighter color than default desktop if you change mind. display:none to remov eit and  group items closer */
		
		@media (max-width: 767px) {
			
			.navbar-nav .dropdown-menu .divider {
			background-color: transparent;
			display:none
		}
						
		}
		
		

/* 3. TITLE
-------------------------------------------------------------------*/

.title {
	background: #89909a;
	color: #fff;
	font-size: 320%;
	font-weight: 900;
	position: relative;
	text-transform: uppercase;
	width: 100%;
}

	.title .title-image {
		background: url(https://placehold.it/1920x1920.gif) no-repeat center top;
		height: 100%;
		left: 0;
		opacity: 0.03;
		overflow: hidden;
		position: absolute;
		top: 0;
		width: 100%;
	}

	.title .container {
		padding: 30px 0;
	}

/* 4. HOME PAGE BANNER
-------------------------------------------------------------------*/

.wide-container {
      position:relative;
      width: 100%;
      height: 60vh;
      margin: 0 auto;
      margin-top:-118px;
  -webkit-animation-name: fade-in;
  -webkit-animation-duration: 1200ms;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 400ms;  
  
    }


#slides {
	height: 100%;
	left: 0;
	position: absolute !important;
	top: 0;
	width: 100%;
-webkit-animation-name: fade-in;
  -webkit-animation-duration: 1200ms;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 0s;   
	
}

	#slides .tint {
		background: rgba(0,0,0,0.2);
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 100;
	}

	.arrow {
		border-radius: 50%;
		background: rgba(255,255,255,0.9);
		color: rgba(255, 0, 0, 0.8);
		bottom: 30px;
		display: block;
		height: 50px;
		left: 50%;
		line-height: 62px;
		margin-left: -25px;
		position: absolute;
		text-align: center;
		width: 50px;
		z-index: 100;
	}
	
	
	
	/* above  change colors to opacity fff becomes rgba(255,255,255,0.9) red becomes rgba(255, 0, 0, 0.8) */

	/* 4.1. SLIDER OFFERS
	-------------------------------------------------------------------*/
		
	/* 4.1. Basic slider container values  desktop first
	-------------------------------------------------------------------*/
	
	
	.wide-container .slider-offers {    /*  used text align method... added "text-align: center;" to this the parent and "display: inline-block;" to child which is  .slider-offers .slidewrapper plus added wrapper to index  */
		left: 0;
		position: absolute;
		text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
		top: 75%;
		width: 100%;
		z-index: 100;
		transform: translateY(-50%);
		text-align: center;
	}	
	
		
	
	.slider-offers .slidewrapper {	
	    width:60vw;
        display: inline-block;	
	}
	
	
	.wide-container .arrow{
		display:none;
	}
	
		
	.slider-offers {
		left: 0;
		position: absolute;
		text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
		top: 68%;                            /* changed was 65%  */
		width: 100%;
		z-index: 100;
		transform: translateY(-50%);  
	
	}
	
	
	
	@media (max-width: 1100px) {
			.slider-offers {
		left: 0;
		position: absolute;
		text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
		top: 72vh;
		width: 100%;
		z-index: 100;
		transform: translateY(-50%);
	}
	
		.slider-offers .slidewrapper {	
	    width:65vw;
        display: inline-block;	
	}		
		
		
	}
	
		
	
	@media (max-width: 767px) {
		.slider-offers {
		left: 0;
		position: absolute;
		text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
		top: 72vh;
		width: 100%;
		z-index: 100;
		transform: translateY(-50%);
	}
	
		.slider-offers .slidewrapper {	
	    width:85vw;
        display: inline-block;	
	}	
				
	}
	
	/* below added  */
	
	@media (max-width: 360px) {
		.slider-offers {
		left: 0;
		position: absolute;
		text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
		top: 68vh;
		width: 100%;
		z-index: 100;
		transform: translateY(-50%);
	}
	
		.slider-offers .slidewrapper {	
	    width:85vw;
        display: inline-block;	
	}	

				
	}
	
	@media (max-width: 320px) {
		.wide-container .slider-offers {
		left: 0;
		position: absolute;
		text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
		top: 70%;
		width: 100%;
		z-index: 100;
		transform: translateY(-50%);
	}

	.slider-offers .slidewrapper {	
	    width:85vw;
        display: inline-block;	
	}	
				
	}
	
	/* 4.1. Basic slider typography / buttons desktop first
	-------------------------------------------------------------------*/
	

		.slider-offers ul,
		.slider-offers li {
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.slider-offers h3,
		.slider-offers h4 {
			color: #fff;
			lin4e-height: 1.2em;
			margin: 0 0px;
		}

		.slider-offers h3 {
			font-size: 44px;
			font-weight: 900;
			line-height: .2em;
		}

		.slider-offers h4 {
			font-size: 25px;            /* CHANGED */ 
			margin-bottom: 0px;
			margin-top:-9px;
			text-transform: none;
			line-height: 1.3em;
			padding-bottom:12px;
		}
		
		/* CHANGED below added*/ 
		
		
		.slider-offers .btn-primary {
        font-family:Lato;			
		font-weight: 900 !important;
		font-size: 18px;
		border-radius: 0px;
		display: inline-block;
        margin-bottom: 0;
        font-weight: normal;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        border: none;                              /* CHANGED */ 
        white-space: nowrap;
        padding: 12px 22px 14px 22px;             /* CHANGED */ 
        line-height: 1.71428;
        border-radius: 0px;                      /* CHANGED */ 
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       -o-user-select: none;
       user-select: none;	       
	}
	
	.icon-scroll {		
		padding-top:0px;
		margin-top: -3px;
	}
	
		
	.icon-scroll h5 {
  padding-top:0px;
  margin-top:0px;		
  color:#fff;
  text-transform: capitalize;
  font-size: 15px;
  font-weight:500;
  ma5rgin-top: 9px;
}
	
	
		#subheader {   
   padding-top:40px;
}


@media (max-width: 2600px) {
		
		.slider-offers h3,
		.slider-offers h4 {
			color: #fff;			
			margin: 0 0px;
		}

		.slider-offers h3 {
			font-size: 34px;
			font-weight: 900;
			line-height: 1.2 !important;
		}

		.slider-offers h4 {
			font-size: 18px;            /* CHANGED */ 
			margin-bottom: 0px;
			margin-top:-3px;
			text-transform: none;
			line-height: 1.3em;
			padding-bottom:7px;
		}
		
.icon-scroll h5 {
  padding-top:1px;
  margin-top:0px;		
  color:#fff;
  text-transform: capitalize;
  font-size: 15px;
  font-weight:500;  
}
		
		
		
}
	
	
	@media (max-width: 1500px) {
		
		.slider-offers h3,
		.slider-offers h4 {
			color: #fff;			
			margin: 0 0px;
		}

		.slider-offers h3 {
			font-size: 34px;
			font-weight: 900;
			line-height: 1.2 !important;
		}

		.slider-offers h4 {
			font-size: 18px;            /* CHANGED */ 
			margin-bottom: 0px;
			margin-top:-3px;
			text-transform: none;
			line-height: 1.3em;
			padding-bottom:10px;
		}
		
		/* CHANGED below added*/ 
		
		
		.slider-offers .btn-primary {
        font-family:Lato;			
		font-weight: 900 !important;
		font-size: 16px;
		border-radius: 0px;
		display: inline-block;
        margin-bottom: 0;
        font-weight: normal;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        border: none;                              /* CHANGED */ 
        white-space: nowrap;
        padding: 10px 22px 14px 22px;             /* CHANGED */ 
        line-height: 1.71428;
        border-radius: 0px;                      /* CHANGED */ 
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       -o-user-select: none;
       user-select: none;	       
	}
	
	.icon-scroll {		
		padding-top:0px;
		margin-top: -3px;
	}
	
	.icon-scroll h5{		
		padding-top:3px;
		margin-top:0px;
	}

	
	.arrow {    
    bottom: 15px;    
}			
		
	}
			@media (max-width: 1100px) {
				
		.slider-offers h3 {
			font-size: 34px;
			line-height: 1.2 !important;
		}		
				
				
		.slider-offers h4 {
			font-size: 21px;
			margin-top: -2px;
			margin-bottom: 5px;
			text-transform: none;
			padding-bottom: 5px;				
		}
		
	.icon-scroll {		
		padding-top:0px;
		margin-top: -3px;
	}
	
	.icon-scroll h5{		
		padding-top:0px;
		margin-top:0px;
	}	
		
	}
			
		
		@media (max-width: 767px) {
		.slider-offers h4 {
			font-size: 21px;
			margin-top: -2px;
			margin-bottom: 5px;
			text-transform: none;
			padding-bottom: 5px;				
		}
		
	.icon-scroll {		
		padding-top:0px;
		margin-top: -3px;
	}
	
	.icon-scroll h5{		
		padding-top:0px;
		margin-top:0px;
	}	
	
	#subheader {
    padding-top: 0px;
}
	
	}
	
	
	
	@media (max-width: 480px) {
		.slider-offers h3 {
			font-size: 28px;
			line-height:1.2 !important;
		}

		.slider-offers h4 {
			font-size: 16px;
			padding-bottom: 5px;
			margin-top: -2px;
			margin-bottom: 2px;
		}
		
		.slider-offers .btn-primary {        
		font-size: 14px;		
        padding: 10px 22px 14px 22px;             /* CHANGED */ 
       
	}
	
	.icon-scroll {		
		padding-top:0px;
		margin-top: -3px;
	}
	
	.icon-scroll h5{		
		padding-top:0px;
		margin-top:0px;
	}	
	
	#subheader {
    padding-top: 0px;
}
		
	}
	
	
		 @media only screen   
  and (max-device-width: 1500px) 
  and (min-width: 1200px)    
  and (-webkit-min-device-pixel-ratio: 1)
  and (-webkit-max-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	  .slider-offers {
    left: 0;
    position: absolute;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
    top: 78vh;
    width: 100%;
    z-index: 100;
    transform: translateY(-50%);
}

.slider-offers h3 {
			font-size: 30px;
			line-height:1.2 !important;
		}

		.slider-offers h4 {
			font-size: 18px;
			padding-bottom: 5px;
			margin-top: -4px;
			margin-bottom: 2px;
		}
		
		.slider-offers .btn-primary {        
		font-size: 12px;		
        padding: 10px 22px 14px 22px;             /* CHANGED */ 
       
	}
	
	.icon-scroll h5 {
    color: #fff;
    text-transform: capitalize;
    font-size: 10px;
    font-weight: 500;	
    ma5rgin-top: 9px;
}
	  
	  
  }
	
	
		 @media only screen   
  and (max-device-width: 1200px) 
  and (min-width: 900px)    
  and (-webkit-min-device-pixel-ratio: 1)
  and (-webkit-max-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	  .slider-offers {
    left: 0;
    position: absolute;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
    top: 75vh;
    width: 100%;
    z-index: 100;
    transform: translateY(-50%);
}

	.slider-offers .slidewrapper {	
	    width:80vw;
        display: inline-block;	
	}		

.slider-offers h3 {
			font-size: 30px;
			line-height:1.2 !important;
		}

		.slider-offers h4 {
			font-size: 18px;
			padding-bottom: 5px;
			margin-top: -2px;
			margin-bottom: 2px;
		}
		
		.slider-offers .btn-primary {        
		font-size: 12px;		
        padding: 10px 22px 14px 22px;             /* CHANGED */ 
       
	}
	
	.icon-scroll h5 {
    color: #fff;
    text-transform: capitalize;
    font-size: 10px;
    font-weight: 500;
    ma5rgin-top: 9px;
}
	  
	  
  }	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

	
	 @media only screen   
  and (max-device-width: 900px) 
  and (min-width: 567px)    
  and (-webkit-min-device-pixel-ratio: 1)
  and (-webkit-max-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	  .slider-offers {
    left: 0;
    position: absolute;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
    top: 68vh;
    width: 100%;
    z-index: 100;
    transform: translateY(-50%);
}

.slider-offers h3 {
			font-size: 18px;
			line-height:1.2 !important;
		}

		.slider-offers h4 {
			font-size: 12px;
			padding-bottom: 5px;
			margin-top: 0px;
			margin-bottom: 2px;
		}
		
		.slider-offers .btn-primary {        
		font-size: 10px;		
        padding: 10px 22px 14px 22px;             /* CHANGED */ 
       
	}
	
	.icon-scroll h5 {
    color: #fff;
    text-transform: capitalize;
    font-size: 10px;
    font-weight: 500;
    ma5rgin-top: 9px;
}
	  
	  
  }
  
  
	 @media only screen   
  and (max-device-width: 567px) 
  and (min-width: 100px)    
  and (-webkit-min-device-pixel-ratio: 1)
  and (-webkit-max-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	  .slider-offers {
    left: 0;
    position: absolute;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
    top: 62vh;
    width: 100%;
    z-index: 100;
    transform: translateY(-50%);
}

.slider-offers h3 {
			font-size: 19px;
			line-height:1.2 !important;
		}

		.slider-offers h4 {
			font-size: 12px;
			padding-bottom: 5px;
			margin-top: 0px;
			margin-bottom: 2px;
		}
		
		.slider-offers .btn-primary {        
		font-size: 10px;		
        padding: 10px 22px 14px 22px;             /* CHANGED */ 
       
	}
	
	.icon-scroll h5 {
    color: #fff;
    text-transform: capitalize;
    font-size: 10px;
    font-weight: 500;
    ma5rgin-top: 9px;
}
	  
	  
  }  
	
	
	@media (max-width: 321px) {
		.slider-offers h3 {
			font-size: 22px;
			line-height:1.2;
		}

		.slider-offers h4 {
			font-size: 14px;
			padding-bottom: 5px;
			margin-top: -2px;
			margin-bottom: 0px;
		}
		
		.slider-offers .btn-primary {        
		font-size: 14px;		
        padding: 6px 21px 8px 21px;             /* CHANGED */ 
       
	}
	
	.icon-scroll {		
		padding-top:0px;
		margin-top: -3px;
	}
	
	.icon-scroll h5{		
		padding-top:0px;
		margin-top:0px;
	}
	
	#subheader {
    padding-top: 0px;
}	
	
	}
	


		.arrow {    
    bottom: 11px;    
}			
	
				
		
		

/* 5. CONTENT
-------------------------------------------------------------------*/

	/* 5.1. SIDEBAR WIDGETS
	-------------------------------------------------------------------*/

	.widget {
		background: #f7f6f2;
		margin-bottom: 30px;
		padding: 30px;
	}

		.widget h3 {
			margin: 0 0 30px;
		}

		.widget ul {
			list-style: none;
			margin: 0 0 30px;
			padding: 0;
		}

		.widget li {
			border-bottom: 1px solid #deddd9;
		}

		.widget li a {
			display: block;
			padding: 5px 0;
		}

		.widget li a:hover {
			background: rgba(0,0,0,0.015);
		}

		.widget li a span {
			color: #777;
			margin-left: 10px;
		}

		.widget .tag {
			background: #222;
			border-radius: 3px;
			color: #fff;
			display: inline-block;
			margin: 0 5px 7px 0;
			padding: 2px 10px;
			text-transform: uppercase;
		}

		.widget .post {
			border: 0;
			margin-bottom: 15px;
			padding: 0;
		}

		.widget .post h5 {
			margin: 0;
		}

		.widget .post h5 a {
			color: #222;
			display: block;
		}

		.widget .post h5 a:hover {
			text-decoration: underline;
		}

		.widget .price {
			color: #222;
			font-size: 1.5em;
			font-weight: 900;
			padding-bottom: 15px;
		}

		.widget .icon {
			color: #8fb488;
		}

		.widget .fa-star {
			color: #fbcd53;
		}

		.widget .course-data {
			padding: 5px 0;
		}

		.widget .share a {
			margin: 0 7px;
		}

		.widget .take-course {
			padding: 15px 0;
			text-align: center;
			width: 100%;
		}

	/* 5.2. BLOG
	-------------------------------------------------------------------*/

	.post h1 {
		margin-bottom: 5px;
	}

	.post h3 {
		margin: 0;
	}

		.post h3 a {
			color: #222;
		}

		.post h3 a:hover {
			text-decoration: underline;
		}

		.post-cover {
			margin-bottom: 30px;
		}

		.meta {
			color: #bbb;
			margin-bottom: 20px;
		}

		.meta span {
			margin-right: 15px;
		}

		.meta i {
			margin-right: 5px;
		}

		.post-date {
			background: #222;
			color: #fff;
			font-weight: 900;
			left: 30px;
			line-height: 1.74em;
			padding: 15px 0;
			position: absolute;
			text-align: center;
			text-transform: uppercase;
			top: 0;
			width: 50px;
		}

		.post-day {
			font-size: 200%;
		}

		.post-month {
			color: #8fb488;
		}

	.media, .media .media {
		border-top: 1px solid #e8e8e8;
		margin-top: 30px;
		padding-top: 30px;
	}

	.fa-reply {
		margin-right: 5px;
	}

	#recent-posts .item h3 {
		margin: 0;
	}

	#recent-posts .item .meta {
		padding: 0;
	}

	/* 5.3. CAROUSELS
	-------------------------------------------------------------------*/

	.carousel-title {
		margin-left: 35px;
		margin-right: 35px;
		position: relative;
		z-index: 100;
	}

		.carousel-title a {
			display: block;
			font-size: 17px;                 /* CHANGED */ 
			font-weight: normal;
			line-height: 1.74em;
			text-transform: none;
		}

	.owl-carousel .item {
		background: #fff;
	}

		.owl-carousel .item h3 {
			margin: 30px 30px 0;
		}

		.owl-carousel .item h3 a {
			color: #222;
			font-weight: 600;        /* CHANGED */ 
            font-family: Lato;     /* CHANGED */ 
		}

		.owl-carousel .item h3 a:hover {
			text-decoration: underline;
		}

		.owl-carousel .item .meta {
			color: #bbb;
			display: block;
			padding: 0 30px 30px;
		}

			.owl-carousel .item .meta p {
				margin: 0;
			}

			.owl-carousel .item .meta .fa-star {
				color: #fbcd53;
			}

			
			/* below change opacity from 0.8 to 0.65 */
			
		.owl-carousel .item .price {
			background: rgba(0,0,0,0.60);			
			border-radius: 0 0 0px 0px;
			color: #fff;
			display: block;
			font-size: 1.5em;
			pa5dding: 17px 15px;
			padding: 10px 15px;
			position: absolute;
			right: 0px;
			top: 0;
		}

	.owl-theme .owl-controls {
		margin: 0 !important;
		padding: 0;
		position: absolute;
		top: -80px;
		width: 100%;
	}

		.owl-theme .owl-controls .owl-nav [class*=owl-] {
			font-size: 14px !important;
			margin: 0 !important;
		}

		.owl-theme .owl-controls .owl-nav .owl-prev {
			float: left;
		}

		.owl-theme .owl-controls .owl-nav .owl-next {
			float: right;
		}

	/* 5.4. MASONRY
	-------------------------------------------------------------------*/

	.masonry .item {
		padding: 0 15px;
	}

		.masonry .item .masonry-container {
			background: #f7f6f2;
			margin-bottom: 30px;
			position: relative;
			width: 100%;
		}

		.masonry .item img {
			width: 100%;
		}

		.masonry .item h3 {
			margin: 30px 30px 0;
		}

		.masonry .item h3 a {
			color: #222;
		}

		.masonry .item h3 a:hover {
			text-decoration: underline;
		}

		.masonry .item .meta {
			color: #bbb;
			display: block;
			margin: 0;
			padding: 0 30px 30px;
		}

		.masonry .item .meta span {
			margin-right: 20px;
		}

		.masonry .item .meta i {
			margin-right: 5px;
		}

		.masonry .item p {
			margin: 0;
			overflow: hidden;
			padding: 0 30px 30px;
		}

	#masonry-2-columns .item {
		width: 50%;
	}

	#masonry-3-columns .item {
		width: 33.333333%;
	}

	#masonry-4-columns .item {
		width: 25%;
	}

	/* 5.5. COURSES
	-------------------------------------------------------------------*/

	.course img {
		width: 100%;
	}

	.course h3 {
		margin: 0;
	}

	.course h3 a {
		color: #222;
	}

	.course .price {
		color: #222;
		font-size: 1.5em;
		font-weight: 900;
		padding-bottom: 15px;
		text-align: right;
	}

	.course-title {
		margin: 0 0 5px;
	}

	.lesson-title {
		margin: 0;
	}

	li.checkbox label {
		display: block;
		padding: 3px 0;
	}

	/* 5.6. GALLERY
	-------------------------------------------------------------------*/

	.gallery {
		list-style: none;
		margin: 0 -15px;
		padding: 0;
	}

		.gallery li {
			padding: 15px;
		}

	/* 5.7. MAP
	-------------------------------------------------------------------*/

	#map-canvas {
		height: 500px;
	}

		.map-address {
			white-space: nowrap;
		}

		.gm-style .gm-style-iw {
			white-space: nowrap;
			width: auto !important;
			height: auto !important;
		}

	/* 5.8. TEACHERS
	-------------------------------------------------------------------*/

	.teachers {
		list-style: none;
		margin: 0 -15px;
		padding: 0;
	}

		.teachers .description,
		#featured-teachers .description {
			background: #fff;
			margin-bottom: 30px;
			padding: 1px 30px 30px;
		}

		#featured-teachers .description h3 {
			margin: 30px 0;
		}

		.teachers .description p,
		#featured-teachers .description p {
			height: 5em;
			overflow: hidden;
		}

	.teacher img {
		margin: 0 15px 15px 0;
	}

	.teacher h5,
	.teacher p {
		margin: 0;
	}

	/* 5.9. UPCOMING EXAMS
	-------------------------------------------------------------------*/

	.exams-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

		.exams-list li {
			position: relative;
		}

			.exams-list li h3 {
				margin: 0 0 1em;
			}

			.exams-list li ul {
				list-style: none;
				margin: 0 0 1em 0;
				padding: 0;
			}

				.exams-list li ul li {
					display: inline;
					margin-right: 20px;
				}

					.exams-list li ul li i {
						margin-right: 7px;
					}

	.exams-grid {
		list-style: none;
		margin: 0 -15px;
		padding: 0;
	}

		.exams-grid li .description {
			background: #fff;
			margin-bottom: 30px;
			padding: 1px 30px 30px;
		}

			.exams-grid li .description p {
				height: 5em;
				overflow: hidden;
			}

			.exams-grid li ul {
				border-top: 1px dashed #ddd;
				list-style: none;
				margin: 0 0 1em 0;
				padding: 0;
			}

				.exams-grid li ul li {
					border-bottom: 1px dashed #ddd;
					overflow: hidden;
					padding: 10px 0;
				}

					.exams-grid li ul li i {
						width: 20px;
					}

		.exams-grid li a {
			background: rgba(143,180,136,0.9);
			bottom: 30px;
			left: 15px;
			opacity: 0;
			position: absolute;
			right: 15px;
			top: 0;
		}

			.exams-grid li a:hover {
				opacity: 1;
			}

			.exams-grid li a span {
				border: 2px solid #fff;
				border-radius: 4px;
				color: #fff;
				font-weight: bold;
				left: 50%;
				margin: -20px 0 0 -70px;
				padding: 7px 15px;
				position: absolute;
				text-transform: uppercase;
				top: 50%;
			}

	/* 5.10. PROGRESS BARS
	-------------------------------------------------------------------*/

	.progress {
		height: 30px;
		margin-bottom: 10px;
	}

	.progress-bar {
		line-height: 30px;
		text-align: left;
		text-transform: uppercase;
	}

	.progress-bar span {
		padding: 0 10px;
	}

	.progress-bar .pull-right {
		background: #222;
		border-radius: 3px;
		color: #fff;
	}

	/* 5.11. REVIEWS
	-------------------------------------------------------------------*/

	#teachers-reviews {
		background: url(https://placehold.it/1200x800.jpg) no-repeat center top;
		background-size: cover;
		position: relative;
	}

		#teachers-reviews .tint {
			background: rgba(247,246,242,0.9);
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

		#teachers-reviews .item {
			background: none;
		}

		#teachers-reviews blockquote {
			color: #222;
			margin: 0;
		}

			#teachers-reviews blockquote .fa-quote-right {
				color: #fbcd53;
			}

	#about-reviews {
		background: url(https://placehold.it/1920x1920.gif) no-repeat center top;
		position: relative;
		padding-bottom: 25px;                         /* CHANGED */ 
	}

		#about-reviews .tint {
			background: #FF3333;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

		#about-reviews .item {
			background: none;
		}

		#about-reviews h2,
		#about-reviews small {
			color: #fff;
			padding-top: 10px;
            margin-bottom: 10px;                /* CHANGED */ 
		}

		#about-reviews blockquote {
			color: #fff;
			margin: 0;
			margin-top: -10px;              /* CHANGED */ 
		}

			#about-reviews blockquote .fa-quote-right {
				color: #fbcd53;
			}

	/* 5.12. SEARCH
	-------------------------------------------------------------------*/

	#search {
		background: url(https://placehold.it/1920x1920.gif) no-repeat center top;
		position: relative;
	}

		#search .tint {
			background: rgba(114,98,83,0.97);
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

		#search h2 {
			color: #fff;
		}

		#search a {
			color: #fbcd53;
		}

			#search a:hover {
				color: #e2b94b;
			}

		#search .btn {
			background: #fbcd53;
			border-color: #e1b84b;
		}

			#search .btn:hover {
				background: #e2b94b;
				border-color: #cca848;
			}

		#search #input-keywords {
			width: 400px;
		}

	/* 5.13. NEWSLETTER
	-------------------------------------------------------------------*/

	#newsletter {
		background: url(https://placehold.it/1920x1920.gif) no-repeat center top;
		position: relative;
		padding-bottom: 90px;           /* CHANGED */ 
	}

		#newsletter .tint {
			background: rgba(137,144,154,0.97);
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

		#newsletter h2 {
			color: #fff;
		}

		#newsletter .btn {
			text-align: center;
			width: 100%;
		}

		#newsletter-name-group,
		#newsletter-email-group,
		#newsletter .input-group {
			width: 100%;
		}

	/* 5.14. SERVICES
	-------------------------------------------------------------------*/

	.service {
		margin: 15px 0;
	}

	/* 5.15. RESPONSIVE VIDEO WRAPPER
	-------------------------------------------------------------------*/

	.video-wrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		height: 0;
	}

		.video-wrapper iframe,
		.video-wrapper object,
		.video-wrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../images/spanish-speaking-world.gif);
		}

/* 6. LINKS
-------------------------------------------------------------------*/

#links {
	background: #373a3e;
	color: #767c84;
}

	#links .col-sm-3 {
		margin: 80px 0;
	}

	#links h3 {
		color: #FECF0D;
		margin: 0 0 30px;
	}

	#links h5 {
		margin: 0;
		text-transform: none;
	}

	#links p {
		margin: 0;
	}

	#links a {
		color: #fff;
	}

		#links a:hover {
			color: #fbcd53;
		}

	#links ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

		#links ul li {
			border-bottom: 1px solid #4b4e52;
			display: table;
			padding: 5px 0;
			width: 100%;
		}

			#links ul li a i {
				color: #FECF0D;
				margin-right: 10px;
			}

	#links img {
		margin: 0 15px 5px 0;
	}

	#links .author a {
		color: #767c84;
	}

/* 7. PREFOOTER
-------------------------------------------------------------------*/

#prefooter {
	background: #323438;
	color: #767c84;
}

	#prefooter .col-sm-3,
	#prefooter .col-sm-6 {
		margin: 70px 0px 70px 0px;                                    /* CHANGED */ 
	}

	#prefooter h3 {
		color: #FECF0D;
		margin: 0 0 30px;
	}

	#prefooter a {
		color: #fff;
	}

		#prefooter a:hover {
			color: #fbcd53;
		}

/* 8. FOOTER
-------------------------------------------------------------------*/

footer {
	background: #2c2f33;
	color: #fff;
	padding: 20px 0;
}

	footer a {
		margin-left: 10px;
	}

/* 9. RESPONSIVE STYLES
-------------------------------------------------------------------*/

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

	/* 9.1. Regular Tablets
	-------------------------------------------------------------------*/
	@media (max-width: 991px) {

		.post h3,
		.widget .post h5 {
			margin-top: 15px;
		}

		.sorting {
			margin-top: 30px;
			text-align: left;
		}
	}

	/* 9.2. Small Tablets
	-------------------------------------------------------------------*/
	@media (max-width: 767px) {

		section {
			padding: 30px 0;
		}

		h1,h2 {
			margin-top: 30px;
		}

		blockquote {
			font-size: 1em;
			padding-left: 40px;
		}

		.quote {
			font-size: 2em;
			line-height: 2em;
		}

		.tools span {
			display: none;
		}

		.navbar-nav .dropdown-menu:before {
			display: none;
		}

		#masonry-2-columns .item,
		#masonry-3-columns .item,
		#masonry-4-columns .item {
			padding: 0;
			width: 100%;
		}

		.media img, .media .media img {
			width: 30px;
		}

		.course h3 {
			margin-top: 30px;
		}

		.course .price {
			text-align: left;
		}

		.course-title {
			margin: 30px 0 5px;
		}

		.exams-grid li a {
			bottom: 0;
		}

		.exams-list li h3 {
			margin: 1em 0;
		}

			.exams-list li ul {
				border-top: 1px dashed #ddd;
			}

			.exams-list li ul li {
				border-bottom: 1px dashed #ddd;
				display: block;
				margin-right: 0;
				padding: 10px 0;
			}

				.exams-list li ul li i {
					margin-right: 0;
					width: 20px;
				}

		.lesson-title {
			margin: 30px 0 0;
		}

		.lesson-prev,
		.lesson-next {
			display: block;
			margin-bottom: 10px;
			text-align: center;
		}

		.lesson-next {
			margin-bottom: 30px;
		}

		.service {
			text-align: center;
		}

		.service h3 {
			margin-top: 15px;
		}

		#recent-posts .item h3 {
			margin-top: 30px;
		}

		#search #input-keywords {
			width: auto;
		}

	}

	/* 9.3. Smartphones
	-------------------------------------------------------------------*/
	
		/* below was 24px .slider-offers h3 altered to vw units  */
	
	@media (max-width: 480px) {
		
		#homepage .tools {
			background: rgba (0,0,0,0.65);
		}

		#homepage .navbar-default {
			background: transparent;
			border: 0;
			min-height: 85px;
		}

	}
	
	
	/* EXTRA CODE
	-------------------------------------------------------------------*/
	

	/* below added so first  course grid has extra tiop padding as all grids are id section. Requires adding class of spacer to html  */
	@media (min-width: 900px) {
	.row1 {		      
		padding-top:20px;
	}
	}
	
	@media (min-width: 900px) {
	.row2 {		      
		padding-bottom:50px;
	}
	}
	
	
	@media (min-width: 900px) {
	.alt-background-row3 {		      
		padding-top:0px;
	}
	
	.alt-background-row3  h2{
        padding-top: 30px;		
		padding-bottom:10px;		
	}
	
	}
	
	
	.alt-background  {		
		padding-top:30px;		
	}
	
	
.icon-scroll {
	position: absolute;
	top: 100%;
	left: 50%;
    transform: translate(-50%, 0%);    
	width: 70vw;	
	z-index: 99999;
	-webkit-transition: opacity: .4s;
	color: red;
	padd5ing-top:3px;
}
.icon-scroll span {
	display: block;
	width: 5px;
	height: 5px;
	border-right: 1px solid rgba(255,255,255,.8);
	border-bottom: 1px solid rgba(255,255,255,.8);
	margin: 0 0 2px 5px;

	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
    animation: mouse-scroll 1s infinite;
    -webkit-animation-direction: alternate;
	animation-direction: alternate;
	color: red;
}


.icon-scroll .mouse {
	height: 30px;
	width: 15px;
	border: 2px solid rgba(255,255,255,.9);
	border-radius: 15px;
  position:relative;
  margin:auto;
  background: #fff;
}

.icon-scroll .wheel {
  position: relative;
  display: block;
  height: 8px;
  width: 3px;
  margin: 2px auto 0;
  background: rgba(255,255,255,.8);
  -webkit-animation: mouse-wheel 1.5s ease infinite;
  -moz-animation: mouse-wheel 1.5s ease infinite;
  animation: mouse-wheel 1.5s ease infinite;
  border-radius: 50%;
  background: black;  
}

.icon-scroll .h5 {
  text-align:center;  
}


.icon-scroll h5 {  
  color:#fff;
  text-transform: capitalize;
  fo5nt-size: 15px;
  font-weight:500;
  ma5rgin-top: 9px;
}