/* =============================================
================================================
Media queries for responsive design
================================================
================================================ */
@media (min-width: 480px) {
	.icon-list-wrapper {
		display: table-cell;
		width: 100%;
		text-align: inherit;
	}
	.icon-list-wrapper .icon-list-icon,
	.icon-list-wrapper .icon-list-details {
		display: table-cell;
		vertical-align: top;
	}
	.icon-list-wrapper .icon-list-icon {
		width: 80px;
		margin: 0;
	}
	.icon-list-wrapper .icon-list-details {
		padding: 0 0 0 20px;
	}
}

@media (min-width: 768px) {
	/*.hero-banner {
		min-height: 700px;
	}*/
	.banner-title {
		font-size: 52px;
		margin-bottom: 40px;
	}
	.banner-subtitle {
		font-size: 33px;
		letter-spacing: 5.5px;
		margin-bottom: -12px;
		padding-top: 10%;
	}
	.section-next-update .section-title {
		font-size: 60px;
	}
	.next-update-call-action {
		font-size: 30px;
		letter-spacing: 1px;
		margin-bottom: 4px;
	}
	/*
	.section-next-update .divider {
		margin-bottom: 75px;
	}
	*/
	.next-update-img {
		margin-bottom: 10px;
	}
	.hero-banner-main {
		padding: 60px 0 100px;
	}
	.section-whatsnew {
		padding: 70px 0;
	}
	.whatsnew-title {
		padding: 60px 0 0 50px;
	}
	.section-whatsnew .section-title {
		font-size: 60px;
	}
	.whatsnew-version {
		font-size: 180px;
		top: -20px;
	}
	.whatsnew-list {
		padding: 0 30px 0 40px;
		margin: 50px 0 0;
	}
	.whatsnew-list li {
		padding: 0 30px 0 40px;
	}
}

@media (min-width: 1200px) {
	.banner-offset-top .banner-subtitle {
		margin-top: 70px;
	}
	.landing-page .navik-menu > ul > li:hover > a {
		color: rgba(255,255,255,0.8) !important;
	}
	.landing-page .sticky .navik-menu > ul > li:hover > a {
		color: rgba(33,33,33,0.8) !important;
	}
	.hero-banner-main {
		padding: 50px 0 40px;
	}
	.hero-banner-main .hero-banner-inside {
		display: table;
		width: 100%;
		text-align: left;
	}
	.hero-banner-main .button {
		text-align: center;
	}
	.hero-main-img {
		display: table-cell;
		left: 0;
		margin-bottom: 0;
		width: 60%;
	}
	.hero-main-info {
		display: table-cell;
		vertical-align: bottom;
		width: 40%;
		padding: 0 7.5% 100px 90px;
	}
	.hero-banner-main .banner-title {
		line-height: 1.1em;
		margin-bottom: 45px;
	}
	.hero-banner-main .banner-subtitle {
		margin-bottom: -2px;
	}
	.hero-main-img-inner {
		margin-top: -20px;
		margin-left: -50%;
	}
	.version-mobile {
		display: none;
	}
	.version-desktop {
		display: inline;
		position: relative;
		top: -7px;
		left: 13px;
	}
	.whatsnew-version {
		left: -20px;
	}
	.whatsnew-mockup-col {
		position: relative;
	}
	.whatsnew-mockup {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 960px;
	}
	.section-whatsnew:after {
		left: 12%;
		border-bottom: 43vw solid #80d4f9;
		border-left: 100vw solid transparent;
	}
}

@media (min-width: 1400px) {
	.hero-main-img-inner {
		margin-top: 0px;
		margin-left: -30%;
	}
	.whatsnew-mockup {
		left: 40px;
	}
}

@media (min-width: 1600px) {
	.hero-main-img-inner {
		margin-left: -20%;
	}
	.whatsnew-mockup {
		left: 65px;
	}
	.section-whatsnew:after {
		left: 18%;
		border-bottom: 40vw solid #80d4f9;
	}
}

@media (min-width: 1800px) {
	.hero-main-img-inner {
		margin-left: -10%;
	}
	.section-whatsnew:after {
		border-bottom: 35vw solid #80d4f9;
	}
}

@media screen and (max-width: 1199px)
{
	.main-menu-link
	{
    	padding-top: 59px !important;
	}
}
@media screen and (max-width: 1009px)
{
	.header-top
	{
		display: none;
	}
	.school-name h1
	{
		font-size: 20px;
	}
	.navik-header .logo 
	{
    	text-align: center;
    	padding: 5px 5px;
	}
	.navik-header .logo img 
	{
    	max-width: 80px;
	}
	.navik-header-container .logo 
	{

    	padding-right: 70%;
	}
}

 @media screen and (max-width: 1000px)
 {
 	.navik-header-container .logo
 	{
 		display: block;
 	}
 	.full-logo 
 	{
 		display: none;
 	}
 	.main-menu-link
	{
    	padding-top: 10px !important;
	}
	.our_feature .col-sm-3 
	{
    	max-width: 100%;
	}
	.carousel-control-next, .carousel-control-prev 
	{
    	width: 16% !important;
	}
	
 }
 @media screen and (max-width: 800px)
 {
 	.col-md-3.col-sm-2 
	{
    	width: 50%;
	}
	.mission h1
	{
		font-size: 25px;
	}
	.mission p
	{
		font-size: 14px;
	}
 }
@media screen and (max-width: 450px)
{
	.image-principal
	{
		padding-right: 0px;
		width: 100%;
		height: 100%;
		float: none;
	}
	.image-principal img 
	{
    	width: 100%;
    	height: 300px;
	}

	.col-md-3.col-sm-2 h2
	{
		font-size: 20px;
	}
	.col-md-3.col-sm-2 p
	{
		font-size: 13px;
	}
	.testimonial-image img 
	{
	    width: 80px;
	    height: 80px;
	}
	.testimonial-paragraph p
	{
		font-size: 13px;
	}
	.col-sm-4.col-lg-4.col-md-4 
	{
    	margin-bottom: 30px;
	}
}