/*
 * Author: Carlos Alvarez
 * URL: http://alvarez.is
 *
 * Project Name: Landing Sumo - Theme 13
 * URL: http://LandingSumo.com
 * Version: 1.0
 */

/*	################################################################
	1. GENERAL STRUCTURES
################################################################# */

/* Import fonts */
@import url(//fonts.googleapis.com/css?family=Raleway:900,700,400);

* { 
	margin: 0;
	padding: 0px;
    font-family: 'Raleway', sans-serif;
} 
body { 
	background: #fff; 
	margin: 0; 
	color: #5a5a5a;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', sans-serif;
	font-weight: 700;
}


p {
    padding: 5px 0;
    margin-bottom: 12px;
    font-family: auto;
    font-weight: 300;
    line-height: 1.1;
    color: #3e3e3e;
    margin-top: 10px;
    margin: 0;
    font-size: calc(11px + (17 - 12) * ( (100vw - 200px) / ( 1024 - 200) ));
}

html,
body {
	height: 100%;
}

.alignleft { float: left; }
.alignright { float: right; }
.aligncenter {
	margin-left: auto;
	margin-right: auto;
	display: block;
	clear: both;
}
.centered {text-align: center}
.mt {
    margin-top: 50px;
    float: left;
}
.mt2 {
    margin-top: 55px;
    float: right;
}
.mb {

    font-size: 24px;
}
.mtb {margin-top: 50px; margin-bottom: 50px;}
.mtb2 { margin-top: 100px; margin-bottom: 100px;}
.ptb {padding-top: 80px; padding-bottom: 80px;}

.clear {
	clear: both;
	display: block;
	font-size: 0;
	height: 0;
	line-height: 0;
	width:100%;
}
::-moz-selection  {
	color: #fff;
	text-shadow:none;
	background:#2B2E31;
}
::selection {
	color: #fff;
	text-shadow:none;
	background:#2B2E31;
}
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
a { 
	padding: 0;
	margin: 0;
	text-decoration: none; 
	-webkit-transition: background-color .4s linear, color .4s linear;
	-moz-transition: background-color .4s linear, color .4s linear;
	-o-transition: background-color .4s linear, color .4s linear;
	-ms-transition: background-color .4s linear, color .4s linear;
	transition: background-color .4s linear, color .4s linear;
	color: #1abc9c;
}
a:hover,
a:focus {
  text-decoration: none;
  color:#696E74;
}

.nopadding {
    padding: 0px !important;
    width: 90%;
    margin: 0 auto;
}

/* Bootstrap Modification */

.navbar-inverse {
	background: transparent;
	border: transparent;
}

img {
	padding-bottom: 10px;
}

/* FORM CONFIGURATION */

input {
	color: black;
	font-size: 16px;
	min-height: 40px;
	border-radius: 2px;
	line-height: 20px;
	padding: 11px 30px 12px;
	border: 1px solid #b9b9af;
	margin-bottom: 10px;
	background-color: #fff;
	-webkit-transition: background-color 0.2s;
	transition: background-color 0.2s;
}

.subscribe-input {
    float: left;
    width: 65%;
    padding: 10px 10px;
    text-align: left;
    margin: 0;
    font-family: sans-serif;
    font-weight: 600;
}

.subscribe-submit {
	right: 0;
}


.btn-register {
	margin-top: 15px;
	border-radius: 50px;
	margin-right: 10px;
	top: 0px;
	float: right;
	font-size: 16px;
}

.btn-sub {
	border-radius: 50px;
}

/* Overall Buttons*/
.btn-theme {
	border-radius: 50px;
	font-size: 14px;
	padding-left: 15px;
	padding-right: 15px;
}

.btn-white {
	background: white;
	color: #2f2f2f;
}

.btn-white:hover {
	background: #2f2f2f;
	color: white;
}

/* HEADER SECTION */
#h {
    /* background: url(../img/header.png) no-repeat center top; */
    /* padding-top: 10px; */
    text-align: center;
    /* background-position: top center; */
    /* min-height: 400px; */
    /* width: 100%; */
    /* -webkit-background-size: 100%; */
    /* -moz-background-size: 100%; */
    /* -o-background-size: 100%; */
    /* background-size: 100%; */
    /* -webkit-background-size: contain; */
    /* -moz-background-size: contain; */
    /* -o-background-size: contain; */
    /* background-size: contain; */
    top: 51px;
    position: relative;
}




#h img {
	padding-bottom: 0px;
}

/* White Section */

#w {
    background: white;
    width: 100%;
    /* padding-top: 100px; */
    /* padding-bottom: 100px; */
    margin: 0 auto;
    position: relative;
}

#w .col-md-6 {
	padding-right: 0px;
}

#w>div>div>p {
	color: #565656;
    font-size: calc(11px + (17 - 12) * ( (100vw - 200px) / ( 1024 - 200) ));
    line-height: 1.3;
}


/* Blue Section - Picton */
#picton {
    background: #ffffff;
    width: 100%;
    /* padding-top: 100px; */
    /* padding-bottom: 100px; */
    color: black;
}

#picton .col-md-6 {

    padding: 0;
}


#picton>div>div>p {
font-size: calc(11px + (17 - 12) * ( (100vw - 200px) / ( 1024 - 200) ));
    line-height: 1.3;
}

/* Blue Section - Curious */
#curious {
	background: #3498DB;
	width: 100%;
	padding-top: 100px;
	padding-bottom: 100px;
	color: white;
}

#curious .col-md-6 {
	padding-right: 0px;
}

#curious p {
	color: #e9e9e9;
	font-size: 16px;
}

/* Blue Section - Malibu */
#malibu {
	background: #6BB9F0;
	width: 100%;
	padding-top: 100px;
	padding-bottom: 100px;
	color: white;
}

#malibu .col-md-6 {
	padding-left: 0px;
}

#malibu p {
	color: #e9e9e9;
	font-size: 16px;
}

/* Blue Section - Jelly */
#jelly {
	background: #2574A9;
	width: 100%;
	padding-top: 100px;
	padding-bottom: 100px;
	color: white;
}

#jelly p {
	color: #e9e9e9;
	font-size: 16px;
}

#jelly h1 {
	font-size: 200px;
}

#jelly h3 {
	margin-top: 10px;
}

/* FOOTER */
#f {
    background: var(--color-primary, #5181b8);
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    color: white;
    text-shadow: 1px 1px 1px #000000, 0 0 1px black;
}

#f p {
	color: white;
}

#f h4 {
	font-weight: 400;
	text-align: center;
	font-size: 24px;
}

/* CREDIT */
#c {
	background: black;
	padding: 20px;
}

#c p {
	color: white;
	font-size: 13px;
}
#w table {
    width: 100%;
    text-align: center;
    border: solid 1px #c1c1c1;
}
#picton table {
    width: 100%;
    text-align: center;
    border: solid 1px #e4e4e4;
}
/* #picton table p {
	color: #000000;
} */

@media (min-width: 200px) and (max-width: 1024px) {

table p {
    color: #565656;
    font-size: calc(11px + (18 - 14) * ( (100vw - 480px) / ( 1024 - 480) ));
    line-height: 1.3;
}
.mb, .mt2 {
    font-size: calc(18px + (20 - 14) * ( (100vw - 280px) / ( 1024 - 280) ));
}
}
h4, .h4 {
    font-size: calc(24px + (20 - 12) * ( (100vw - 400px) / ( 1024 - 200) ))
}

.mb {
    font-size: calc(14px + (20 - 14) * ( (100vw - 280px) / ( 1024 - 280) ));
    padding: 0 0 5px 0;}

@media (min-width: 200px) and (max-width: 768px) {









}
#h img {
    width: 100%;
    height: auto;
}
.phone {
	    text-align: center;
    font-size: calc(30px + (20 - 12) * ( (100vw - 400px) / ( 1024 - 200) ));
}
.phone .new {
	    text-align: center;
    font-size: calc(30px + (20 - 12) * ( (100vw - 400px) / ( 1024 - 200) ));
	    line-height: 1;
}
.number {
font-size: calc(18px + (20 - 12) * ( (100vw - 200px) / ( 1024 - 200) ));
    color: white;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    display: inline;
}
.number a{
color: white;
}
.number strong{
color: white;
}

.number:hover a{
color: #ffec00;
}
#clearen {
	height: 200px;
    background: #59abe3;
}
.container_new h3{
	color: #59abe3;
    font-weight: 700;
    font-size: 31px;
}
@media (min-width: 200px) and (max-width: 1200px) {
.number {
    font-size: calc(18px + (20 - 12) * ( (100vw - 200px) / ( 1024 - 200) ));
    color: white;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    display: table;
    padding: 5px 0;
    border: solid 0px white;
}
}
.btn-info {
    color: #000;
    background-color: #ffec00;
    border-color: #fdbf11;
}
.btn-info:hover {
    color: #000;
    background-color: #ffd334;
    border-color: #fdbf11;
}


  .header-h1 {
    position: relative;
    margin-bottom: .5rem;
    text-align: center;
  }
.header-h1 h1 {
    display: inline-block;
    background: #fff;
    margin-bottom: 0;
    font-size: 1.5rem;
    text-transform: uppercase;
    padding: .5rem 1.5rem;
    border: .125rem solid #bf010a;
    color: #ffffff;
}
.header-h1 h1::after {
    content: "";
    position: absolute;
    background: #ef141f;
    height: 0.200rem;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: -999;
}
.header-h1-dark h1 {
    background: #ef141f;
    color: #fff;
}
.header-h1 h1 {
color: white;
    font-weight: 900;
    font-size: calc(20px + (20 - 12) * ( (100vw - 400px) / ( 1024 - 400) ));
    margin: 5px 0;
    text-shadow: 1px 1px 1px #000000, 0 0 1px black;}
  
.container {
	width: 100%;
}


  .header-h2 {
    text-align: center;
    margin-bottom: .5rem;
  }
  .header-h2 h1 {
display: inline-block;
    position: relative;

    color: #fff;
    margin-bottom: 0;
    padding: .5rem 3rem;
    font-size: 1.5rem;
    text-transform: uppercase;
  }
  .header-h2 h1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-left: 2.5rem solid #fff;
    border-top: 4rem solid transparent;
    border-bottom: 4rem solid transparent;    
  }
  .header-h2 h1::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-right: 2.5rem solid #fff;
    border-top: 4rem solid transparent; 
    border-bottom: 4rem solid transparent;      
  }
.header-h2 h1 {
    color: white;
    font-weight: 900;
    font-size: calc(16px + (16 - 12) * ( (100vw - 400px) / ( 1024 - 200) ));
    margin: 0;
    text-shadow: 1px 1px 1px #000000, 0 0 1px black;
}
.header_h1 {
    color: white;
    font-weight: 900;
    font-size: calc(16px + (16 - 12) * ( (100vw - 400px) / ( 1024 - 200) ));
    line-height: 3;
}
.new_full {
	    width: 100%;
    margin: 10px 0;
    border-bottom: solid 2px red;
}

  .header-h2 {
    text-align: center;
    margin-bottom: .5rem;
  }
.header-h2 h2 {
    display: inline-block;
    position: relative;
    background: #ef141f;
    color: #fff;
    margin-bottom: 0;
    padding: .5rem 3rem;
    font-size: 1.5rem;
    text-transform: uppercase;
}
}
  .header-h2 h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-left: 1.5rem solid #fff;
    border-top: 3rem solid transparent; 
    border-bottom: 3rem solid transparent;      
  }

.header-h2 h2 {
color: white;
    font-weight: 900;
    font-size: calc(15px + (20 - 12) * ( (100vw - 400px) / ( 1024 - 200) ));
    text-shadow: 1px 1px 1px #000000, 0 0 1px black;
}
.big_red {
    font-size: 50px;
    color: red;
    line-height: 1;
    vertical-align: top;
    text-shadow: 1px 1px 1px white, 0 0 4px white;
}
.big_red_text {
    font-size: calc(70px + (16 - 12) * ( (100vw - 400px) / ( 1024 - 200) ));
    color: red;
    display: block;
    line-height: 0;
    vertical-align: middle;
    padding: 14px 0 3px 0;
}
.new_red {
    display: inline-block;
    position: relative;
    background: #59abe3;
    color: #fff;
    margin-bottom: 10px;
    padding: .5rem 3rem;
    text-transform: uppercase;
    font-size: calc(16px + (16 - 12) * ( (100vw - 400px) / ( 1024 - 200) ));
    font-weight: 900;
    text-align: center;
    line-height: normal;
  }
.big_red_small {
    font-size: calc(30px + (16 - 12) * ( (100vw - 400px) / ( 1024 - 200) ));
}

.new_red_small {
    display: inline-block;
    position: relative;
    background: #59abe3;
    color: #fff;
    /* margin-bottom: 10px; */
    padding: .5rem 3rem;
    text-transform: uppercase;
    font-size: calc(16px + (16 - 12) * ( (100vw - 400px) / ( 1024 - 200) ));
    font-weight: 900;
    text-align: center;
    line-height: normal;
}
.new_red_small::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-left: 1.5rem solid #fff;
    border-top: 2rem solid transparent;
    border-bottom: 2rem solid transparent;   
  }
.new_red_small::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-right: 1.5rem solid #fff;
    border-top: 2rem solid transparent; 
    border-bottom: 2rem solid transparent;      
  }
@media (min-width: 200px) and (max-width: 768px) {
.phone {
    text-align: center;
    font-size: calc(30px + (20 - 12) * ( (100vw - 400px) / ( 1024 - 200) ));
    line-height: 1.1;
}
.phone .new {
    text-align: center;
    font-size: calc(30px + (20 - 12) * ( (100vw - 400px) / ( 1024 - 200) ));
    line-height: 1;
    padding: 5px 0;
    text-shadow: none;
}
h4, .h4 {
    font-size: calc(24px + (20 - 12) * ( (100vw - 400px) / ( 1024 - 200) ));
    text-align: center;
}
.subscribe-input {
float: left;
    width: 100%;
    text-align: left;
    margin-right: 0;
    margin: 5px 0 10px 0px;
}
#f {
    width: 100%;
    padding-top: 0px;
    padding-bottom: 10px;
    color: white;
}
.mt {
    margin-top: 0;
    float: left;
}
.mt2 {
    margin-top: 0;
    float: right;
}
.pull-left {
    float: right !important;
}
#w .col-md-6 {
    padding-right: 0px;
    padding: 0;
}
#w {
    background: white;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
}
#picton {
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;

}
#w {
    background: white;
    width: 100%;
    /* padding-top: 100px; */
    /* padding-bottom: 100px; */
    width: 100%;
}
.header-h2 h2 {
    color: white;
    font-weight: 900;
    font-size: calc(16px + (20 - 12) * ( (100vw - 400px) / ( 1024 - 200) ));
}
.header-h1 h1 {
    font-size: calc(15px + (20 - 12) * ( (100vw - 400px) / ( 1024 - 400) ));
}
.big_red {
    font-size: 25px;
}
.header-h2 h1 {
    font-size: calc(12px + (16 - 12) * ( (100vw - 400px) / ( 1024 - 200) ));
}
.header-h2 h1::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 1.5rem solid #fff;
    border-top: 2.5rem solid transparent;
    border-bottom: 2.5rem solid transparent;
}
.header-h2 h1::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    border-right: 1.5rem solid #fff;
    border-top: 2.5rem solid transparent;
    border-bottom: 2.5rem solid transparent;
}
.new_red {
    font-size: calc(12px + (16 - 12) * ( (100vw - 400px) / ( 1024 - 200) ));
    line-height: normal;
}
.big_red_text {
    font-size: calc(40px + (16 - 12) * ( (100vw - 400px) / ( 1024 - 200) ));
    color: red;
    display: block;
    line-height: 0;
    vertical-align: middle;
padding: 10px 0 0 0;
}
.big_red_small {
	font-size: 24px;
}
.new_red::before {
	display:none;

}
.new_red::after {
	display:none;
}
.new_red_small {

    font-size: calc(12px + (16 - 12) * ( (100vw - 400px) / ( 1024 - 200) ));

}
.new_red_small::before {

    left: -1px;

}
.new_red_small::after {

    right: -1px;

}
}


.one {
clear: both;
    display: block;
    text-shadow: 1px 1px 1px #000000, 0 0 1px black;
}
.one2 {
    align-content: normal;
    color: #ef141f;
    text-shadow: 1px 1px 1px white, 0 0 1px white;}
.one3 {
    clear: both;
    display: block;
}


.new_red::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
border-left: 3.5rem solid #fff;
    border-top: 6rem solid transparent;
    border-bottom: 6rem solid transparent;   
  }
.new_red::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-right: 3.5rem solid #fff;
    border-top: 6rem solid transparent; 
    border-bottom: 6rem solid transparent;      
  }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}