/* ================= Table of Contents ==================

	1. Basic Styling
		1.1 Common Elements
		1.2 Common Classes
		1.3 Button & Input
		1.4 Fonts
		1.5 Loading Effect
	2. Header
		2.1 Overview
		2.2 Navigations
		2.3 Hamburger Menu
	3. Footer
		3.1 Overview
	4. Animations
		4.1 Bounce Animation
	N. End of Base Styles

==================================================== */

/* ====================================================

	1. Basic Styling

==================================================== */

	/* ================================================
		1.1 Common Elements
	================================================ */

    *{
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box; 
        -o-box-sizing: border-box; 
        -ms-box-sizing: border-box; 
        box-sizing: border-box;
    }
    body{
        height: auto;	
        text-align: left;
        font-family: sans-serif;	
        line-height: 1.5;
        font-family: 'lato-light', sans-serif;
    }
    h1, h2, h3, h4, h5, h6, strong{
        font-weight: normal;
    }
    h1{
        font-size: 2em;
        font-size: 92px;
    }
    h2{
        font-size: 1.5em;
        font-size: 60px;
    }
    h3{
        font-size: 1.17em;
        font-size: 48px;
    }
    h4{
        font-size: 1.12em;
        font-size: 36px;
    }
    h5{
        font-size: .83em;
        font-size: 24px;
    }
    h6{
        font-size: .75em;
        font-size: 18px;
    }
    p{
        font-size: 18px;
        line-height: 24px;
        font-family: 'lato-light', sans-serif;
        color: #454545;
    }
    a{
        color: inherit;
        text-decoration: none;
    }
    .wrapper{
        width: 1280px;
        margin: 0 auto;
    }

/* ================================================
    1.2 Common Classes
================================================ */

    .wid-1-1{
        width: 100%;
    }
    .wid-1-2{
        width: 50%;
    }
    .wid-1-3{
        width: 33.33%;
    }
    .wid-1-4{
        width: 25%;
    }
    .wid-1-5{
        width: 20%;
    }
    .wid-3-10{
        width: 30%;
    }
    .wid-2-3{
        width: 66.66%;
    }
    .wid-2-5{
        width: 40%;
    }			
    .wid-3-4{
        width: 75%;
    }			
    .wid-3-5{
        width: 60%;
    }
    .wid-4-5{
        width: 80%;
    }
    .wid-65{
            width: 65%;
    }
    .wid-35{
        width: 35%;
    }
    .wid-7-10{
        width: 70%
    }
    .wid-a{
        width: auto;
    }
    .mar-0-a{
        margin: 0 auto;
    }
    .dis-inl{
        display: inline;
    }
    .f-left{
        float: left;
    }
    .f-right{
        float: right;
    }
    .dis-b{
        display: block;
    }
    .dis-n{
        display: none;
    }
    .dis-i-b{
        display: inline-block;
    }
    .v-a-top{
        vertical-align: top;
    }
    .v-a-mid{
        vertical-align: middle;
    }
    .v-a-bot{
        vertical-align: bottom;
    }
    .v-cover{
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: hidden;
        display: table;
        z-index: 9;
    }
    .v-one{
        height: auto;
        width: 100%;
        margin: auto;
        top: 0;
        bottom: 0;
        display: table-cell;
        vertical-align: middle;
    }
    .l-s-n{
        list-style: none;
    }
    .t-a-l{
        text-align: left;
    }
    .t-a-c{
        text-align: center;
    }
    .t-a-r{
        text-align: right;
    }
    .cover-img{
        background: url(../images/icons/no-image/logo-bg.png) no-repeat center center;
          background-position: center center;
          -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        -ms-background-size: cover;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .cover-img img{
        width: 100%;
        height: auto;
        display: block;
    }
    .h-100vh{
        height: 100vh;
    }
    .w-100vw{
        width: 100vw;
    }
    .pos-abs{
        position: absolute;
    }
    .pos-rel{
        position: relative;
    }
    .z-index-99{
        z-index: 99;
    }
    .pad-0{
        padding: 0;
    }
    .mar-0{
        margin: 0;
    }
    .mar-0-a{
        margin: 0 auto;
    }
    .opa-0{
        -webkit-opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=0);			
        -khtml-opacity: 0;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    .opa-1{
        -webkit-opacity: 1;
        -moz-opacity: 1;			
        filter: alpha(opacity=100);			
        -khtml-opacity: 1;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    .b-r-0{
        -webkit-border-radius: 0%;
        -moz-border-radius: 0%;
        -o-border-radius: 0%;
        -ms-border-radius: 0%;
        border-radius: 0%;
    }
    .b-r-2,
    .sub-logo p:after{
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -o-border-radius: 2px;
        -ms-border-radius: 2px;
        border-radius: 2px;
    }
    .b-r-4{
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -o-border-radius: 4px;
        -ms-border-radius: 4px;
        border-radius: 4px;
    }
    .b-r-10{
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -o-border-radius: 10px;
        -ms-border-radius: 10px;
        border-radius: 10px;
    }
    .b-r-20{
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -o-border-radius: 20px;
        -ms-border-radius: 20px;
        border-radius: 20px;
    }
    .b-r-40{
        -webkit-border-radius: 40px;
        -moz-border-radius: 40px;
        -o-border-radius: 40px;
        -ms-border-radius: 40px;
        border-radius: 40px;
    }
    .b-r-100,
    .menuBtn,
    .menuBtn:after{
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        -o-border-radius: 100%;
        -ms-border-radius: 100%;
        border-radius: 100%;
    }
    .text-shadow{
        -webkit-text-shadow: 1px 0px 0px rgba(0,0,0,.4);
        -moz-text-shadow: 1px 0px 0px rgba(0,0,0,.4);
        -o-text-shadow: 1px 0px 0px rgba(0,0,0,.4);
        -ms-text-shadow: 1px 0px 0px rgba(0,0,0,.4);
        text-shadow: 1px 0px 0px rgba(0,0,0,.4);
    }
    .b-s-none{
        -moz-box-shadow: none;
          -webkit-box-shadow: none;
          -o-box-shadow: none;
          -ms-box-shadow: none;
          box-shadow: none;
    }
    .of-vis{
        overflow: visible;
    }
    .of-hid{
        overflow: hidden;
    }
    .of-auto{
        overflow: auto;
    }
    .t-t-u{
        text-transform: uppercase;
    }
    .t-t-l{
        text-transform: lowercase;
    }
    .t-d-ul{
        text-decoration: underline;
    }
    .bg-trans{
        background: transparent;
    }
    .cur-pointer{
        cursor: pointer;
    }
    .color-inherit{
        color: inherit;
    }
    .trans-all,
    input, select, textarea,
    .menuBtn:after{
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -o-transition: all 0.2s;
        -ms-transition: all 0.2s;
        transition: all 0.2s;
    }
    .color-white{
        color: #FFFFFF;
    }
    .primary-color{
        color: #C6CDD3;
    }
    .secondary-color{
        color: #236EA1
    }

/* ================================================
    1.3 Button & Input
================================================ */

    button{
        border: none;
        outline: none;
        cursor: pointer;
    }
    input, select, textarea{
        border: none;
        outline: none;
        resize: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        -ms-appearance: none;
        appearance: none;
    }
    button::-moz-focus-inner,
    input::-moz-focus-inner,
    select::-moz-focus-inner,
    textarea::-moz-focus-inner{
          outline: none !important;
    }
    select:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 #000;
    }
    textarea{
        -webkit-appearance: textarea;
        -moz-appearance: textarea;
        -o-appearance: textarea;
        -ms-appearance: textarea;
        appearance: textarea;
        -webkit-rtl-ordering: logical;
        -moz-rtl-ordering: logical;
        -o-rtl-ordering: logical;
        -ms-rtl-ordering: logical;
        rtl-ordering: logical;
        -webkit-user-select: text;
        -moz-user-select: text;			
        -o-user-select: text;			
        -ms-user-select: text;			
        user-select: text;
    }
    textarea::-ms-expand{
        display: none;
    }
    .ie textarea{
    }
    ::placeholder {
        color: #939AA0;
        opacity: 1;
    }
    :-ms-input-placeholder {
        color: #939AA0;
    }
    ::-ms-input-placeholder {
        color: #939AA0;
    }
    input, select, textarea{
        height: 60px;
        line-height: 60px;
        border: solid;
        border-color: #C6CDD3; 
        border-width: 2px;
        background: #FFFFFF;
        display: block;
        padding: 0 20px;
        font-size: 16px;
        color: #939AA0;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -o-border-radius: 10px;
        -ms-border-radius: 10px;
        border-radius: 10px;
    }
    textarea{
        padding: 20px;
        line-height: 30px;
        height: 240px;
        display: block;
    }
    select:focus,
    input:focus,
    textarea:focus{
        outline: none;
        border-color: #236EA1;
    }
    select{
        background: #FFFFFF url(../images/icons/contact-select.svg) right center no-repeat;
    }
    select[disabled]{
        background: #FFFFFF url(../images/primary/icons/common/select-disabled.svg) right center no-repeat;
    }
    button,
    input[type="submit"]{
        color: #FFFFFF;
        height: 52px;
        line-height: 52px;
        padding: 0 30px;
        font-size: 16px;
        background: #C6CDD3;
        border: solid 2px;
        border-color: #C6CDD3;
        cursor: pointer;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        -o-border-radius: 30px;
        -ms-border-radius: 30px;
        border-radius: 30px;
    }
    button.trans-all{
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
        -ms-transition: all 0.4s;
        transition: all 0.4s;
    }
    button:hover,
    input[type="submit"]:hover{
        background: #236EA1;
        border-color: #236EA1;
    }
    button:active,
    button:focus,
    input[type="submit"]:active,
    input[type="submit"]:focus{
        background: #236EA1;
        border-color: #236EA1;
    }		

/* ================================================
    1.4 Fonts
================================================ */

    .barlow-black{
        font-family: 'barlow-black', sans-serif;
    }
    .barlow-regular{
        font-family: 'barlow-regular', sans-serif;
    }	
    .barlow-light{
        font-family: 'barlow-light', sans-serif;
    }
    .lato-black{
        font-family: 'lato-black', sans-serif;
    }
    .lato-regular,
    input, select, textarea{
        font-family: 'lato-regular', sans-serif;
    }
    .lato-regular{
        font-family: 'lato-regular', sans-serif;
    }
    .lato-bold{
        font-family: 'lato-bold', sans-serif;
    }
    .lato-regular{
        font-family: 'lato-regular', sans-serif;
    }
    .lato-light{
        font-family: 'lato-light', sans-serif;
    }

/* ================================================
    1.5 Loading Effect
================================================ */

    #loaderMain{
        height: 100vh;
        width: 100vw;
        position: fixed;
        z-index: 99999999 !important;
        top: 0;
        left: 0;
        background: #EDEDED;
    }
    .loadingBox{
        height: 30px;
        width: 42px;
        position: absolute;
        top: 50%;
        margin-top: -15px;
        left: 50%;
        margin-left: -21px;
    }
    .loadingBox ul{
        overflow: hidden;
        height: 40px;
        position: relative;
    }
    .loadingBox ul li{
        width: 6px;
        position: absolute;
        bottom: 0;
        height: 6px;
        transition-timing-function: ease-in;
           -webkit-transition-timing-function: ease-in;
           -moz-transition-timing-function: ease-in;
           -webkit-animation-name: loadingEffect;
           -moz-animation-name: loadingEffect;
           -o-animation-name: loadingEffect;
           -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-duration: 1s;
        -moz-animation-iteration-count: infinite;
        -o-animation-duration: 1s;
        -o-animation-iteration-count: infinite;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        list-style: none;	    	
    }
    .loadingBox ul li:after{
        position: absolute;
        content: '';
        height: 6px;
        width: 6px;
        top: 0;
        left: 0;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        -o-border-radius: 100%;
        -ms-border-radius: 100%;
        border-radius: 100%;
    }
    .loadingBox ul li:nth-child(1){
        left: 0;
    }
    .loadingBox ul li:nth-child(1):after{
        background: #e21c40;
    }
    .loadingBox ul li:nth-child(2){			
        left: 6px;
        -webkit-animation-delay: .1s;
        -moz-animation-delay: .1s;
        -o-animation-delay: .1s;
        animation-delay: .1s;
    }
    .loadingBox ul li:nth-child(2):after{
        background: #86c546;
    }
    .loadingBox ul li:nth-child(3){
        left: 12px;
        -webkit-animation-delay: .2s;
        -moz-animation-delay: .2s;
        -o-animation-delay: .2s;
        animation-delay: .2s;
    }
    .loadingBox ul li:nth-child(3):after{
        background: #fbaa25;
    }
    .loadingBox ul li:nth-child(4){
        left: 18px;
        -webkit-animation-delay: .3s;
        -moz-animation-delay: .3s;
        -o-animation-delay: .3s;
        animation-delay: .3s;
    }
    .loadingBox ul li:nth-child(4):after{
        background: #93958c;
    }
    .loadingBox ul li:nth-child(5){			
        left: 24px;
        -webkit-animation-delay: .4s;
        -moz-animation-delay: .4s;
        -o-animation-delay: .4s;
        animation-delay: .4s;
    }
    .loadingBox ul li:nth-child(5):after{
        background: #2cace2;
    }
    .loadingBox ul li:nth-child(6){			
        left: 30px;
        -webkit-animation-delay: .5s;
        -moz-animation-delay: .5s;
        -o-animation-delay: .5s;
        animation-delay: .5s;
    }
    .loadingBox ul li:nth-child(6):after{
        background: #682a7c;
    }
    .loadingBox ul li:nth-child(7){
        left: 36px;
        -webkit-animation-delay: .6s;
        -moz-animation-delay: .6s;
        -o-animation-delay: .6s;
        animation-delay: .6s;
    }
    .loadingBox ul li:nth-child(7):after{
        background: #ea118c;
    }
    @-webkit-keyframes loadingEffect{
        0% { height: 10px; }
        50%{ height: 30px; }
        100% { height: 10px; }
    }
    @-moz-keyframes loadingEffect{
        0% { height: 10px; }
        50%{ height: 30px; }
        100% { height: 10px; }
    }
    @-o-keyframes loadingEffect{
        0% { height: 10px; }
        50%{ height: 30px; }
        100% { height: 10px; }
    }
    @-ms-keyframes loadingEffect{
        0% { height: 10px; }
        50%{ height: 30px; }
        100% { height: 10px; }
    }
    @keyframes loadingEffect{
        0% { height: 10px; }
        50%{ height: 30px; }
        100% { height: 10px; }
    }

/* ====================================================

2. Header

==================================================== */

/* ================================================
    2.1 Overview
================================================ */

    header .main-logo-holder{
        padding: 74px 103px 0 103px;
    }
    header img.main-logo{
        height: 46px;
        width: auto;
    }
    header img.blog-logo{
        width: 168px;
        height: auto;
        margin: 40px auto;
    }
    header img.close-blog{
        height: 36px;
        width: 36px;
        position: absolute;
        top: 74px;
        right: 74px;
        z-index: 11;
    }

/* ================================================
    2.2 Navigations
================================================ */

    nav{
        border-bottom: solid 1px #DCE1E5;
        border-top: solid 1px #DCE1E5;
    }
    nav ul li{
        margin: 0 60px;
    }
    nav ul li a{
        font-size: 18px;
        line-height: 80px;
        color: #C6CDD3;
    }
    nav ul li a:hover,
    nav ul li a.current{
        color: #236EA1;
    }

/* ================================================
    2.3 Hamburger Menu
================================================ */

    .menuBtn,
    .menuBtn:after{
        width: 30px;
        height: 30px;
    }
    .menuBtn{
        width: 30px;
        height: 30px;
        position: fixed;
        top: 24px;
        left: 12px;
        z-index: 99999;
        display: none;
    }
    .menuBtn:after{
        position: absolute;
        content: '';
        top: -2px;
        left: -2px;
        border: solid 2px;
        border-color: transparent;
    }
    .menuBtn span{
        position: absolute;
        content: '';
        height: 2px;
        width: 16px;
        background: #C6CDD3;
        left: 7px;
    }
    .menuBtn span:nth-child(1){
        top: 8px;
    }
    .menuBtn span:nth-child(2){
        top: 14px;
    }
    .menuBtn span:nth-child(3){
        top: 20px;
    }
    .open:after{
        border-color: #FFFFFF;
    }
    .open span{
        background: #FFFFFF;
        left: 9px;
    }
    .open span:nth-child(2){
        display: none;
    }
    .open span:nth-child(1){
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform-origin: bottom left;
        -moz-transform-origin: bottom left;
        -o-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
        transform-origin: bottom left;
    }
    .open span:nth-child(3){
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: top left;
        -moz-transform-origin: top left;
        -o-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
    }


/* ====================================================

3. Footer

==================================================== */

/* ================================================
    3.1 Overview
================================================ */

    footer{
    }

/* ====================================================

4. Animations

==================================================== */

/* ================================================
    4.1 Bounce Animation
================================================ */

    .bounce-animation{
        -webkit-animation: bounce 1.8s linear infinite;
        -moz-animation: bounce 1.8s linear infinite;
        -o-animation: bounce 1.8s linear infinite;
        -ms-animation: bounce 1.8s linear infinite;
        animation: bounce 1.8s linear infinite;
    }
    @-webkit-keyframes bounce {
        0% { -webkit-transform: translateY(0px); }
        50% { -webkit-transform: translateY(6px); }
        100%   { -webkit-transform: translateY(0px); }
    }
    @-moz-keyframes bounce {
        0% { -moz-transform: translateY(0px); }
        50% { -moz-transform: translateY(6px); }
        100%   { -moz-transform: translateY(0px); }
    }
    @-o-keyframes bounce {
        0% { -o-transform: translateY(0px); }
        50% { -o-transform: translateY(6px); }
        100%   { -o-transform: translateY(0px); }
    }
    @-ms-keyframes bounce {
        0% { -ms-transform: translateY(0px); }
        50% { -ms-transform: translateY(6px); }
        100%   { -ms-transform: translateY(0px); }
    }
    @keyframes bounce {
        0% { transform: translateY(0px); }
        50% { transform: translateY(6px); }
        100%   { transform: translateY(0px); }
    }

/* ================================================

N. End of Base Styles

================================================ */