/*
==  THEME DETAILS  ============================================================
    Theme Name: POS KPN Netwerk
	Theme URI: https://kpnpos.alfabetreclame.nl/
    Description: Stylesheet voor POS KPN Netwerk
    Version: 1.0
   	Author: Alfabet Reclame
	Author URI: https://www.alfabetreclame.nl

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

/*---------------------------------------------- 
	1. Basics
------------------------------------------------*/
	html {
  		font-size: 20px;
	}

	body {
        font-family: 'Roboto', sans-serif;
		font-size: 0.8rem;
	  	line-height: 1.25rem;
		color: #000;
		background: #FFF; 
		-webkit-font-smoothing: antialiased;
  		-moz-osx-font-smoothing: grayscale;
        background-image: url(../images/bg-pattern.png);
		background-repeat: repeat;
	}
	
	a, a:hover, .btn, .btn:hover , .transition {
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		text-decoration:none;	
	}
	
	p , figure , blockquote ,
	.list-inline-item:not(:last-child) {
		margin: 0;	
	}

	a {
		color: #00ABE7;
	}

	a:hover {
		color: #000;
	}

	button:focus ,
	:focus {
		outline: 0 !important;
	}
	
	h1, h2, h3, h4 {
        font-family: 'Raleway', sans-serif;
        font-weight: 800;
        color: #106DB7;
		line-height: 1.5;
		margin: 0;
		padding: 0;
	}

	h1 {
		font-size: 2rem;
	}

	h2 {
		font-size: 1.5rem;
	}	

	h3 {
		font-size: 1.25rem;
	}

	h4 {
		font-size: 1rem;
	}

	ul {
		margin: 0;
		padding: 0;
	}   

    #page-content {
        min-height: calc(100vh - 17.25rem);
    }

    .padding-section {
        padding: 3rem 0;
    }

    .box-shadow {
        -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
        box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
    }

	@media all and (min-width: 1100px) {
		.container {
			max-width: 1100px !important;
		}	
	}

    @media all and (max-width: 1440px) {
        html {
			font-size: 18px;
		}
	}

    @media all and (max-width: 1200px) {
        html {
			font-size: 16px;
		}
	}

    @media all and (max-width: 992px) {
        .powered-by a {
            width: 40%;
        }
    }

    @media all and (max-width: 767px) {
        html {
			font-size: 15px;
		}
	}

/* Buttons -------------------------------------- */
	.btn-primary, 
	.btn-primary:active {
		background: #00ABE7;
    	color: #FFF;
    	border: none;
	}
	
	.btn-primary:hover {
		background: #000;
		color: #FFF;
		text-decoration:none;
		border: none;
	}

    .btn-secondary {
		background: none;
		color: #000;
		border: 1px solid #707070;
	}

     .btn-secondary:hover {
		background: #000;
		color: #FFF;
		text-decoration:none;
		border: 1px solid #000;
	}

    .btn-secondary i {
        color: #707070;
    }

    .btn-third {
		background: rgba(0,107,45,1);
        background: -moz-linear-gradient(left, rgba(0,107,45,1) 0%, rgba(59,170,53,1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,107,45,1)), color-stop(100%, rgba(59,170,53,1)));
        background: -webkit-linear-gradient(left, rgba(0,107,45,1) 0%, rgba(59,170,53,1) 100%);
        background: -o-linear-gradient(left, rgba(0,107,45,1) 0%, rgba(59,170,53,1) 100%);
        background: -ms-linear-gradient(left, rgba(0,107,45,1) 0%, rgba(59,170,53,1) 100%);
        background: linear-gradient(to right, rgba(0,107,45,1) 0%, rgba(59,170,53,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006b2d', endColorstr='#3baa35', GradientType=1 );
		color: #FFF;
		border: none;
	}

    .btn-third:hover {
        opacity: 0.9;
        color: #FFF;
    }

	.btn {
		font-size: 0.9rem;
        font-weight: 400;
		line-height: 1rem;
		padding: 0.8rem 1.25rem;
		border-radius: 0; 
	}

    .round {
       -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px; 
    }

    .btn i {
        font-size: 1rem;
        line-height: 1rem;
        padding-right: 0.25rem;
    }

    button:focus ,
	.btn:focus {
		outline: 0 !important;
		box-shadow: none !important;
	}
	
/* Content Block -------------------------------------- */	
	.content-block p + p ,
	.content-block p + h2 ,
	.content-block p + h3 ,
	.content-block p + h4 ,
	.content-block ul + p ,
	.content-block ul + h3 {
		margin-top: 1.75rem !important;
	}

	.content-block h3 {
        text-transform: inherit;
		margin-bottom: 0.5rem;
	}
    
/*---------------------------------------------- 
	2. Header
------------------------------------------------*/
	#header {
		padding: 1rem 0;
        min-height: 5.25rem;
        background: #FFF;
	}

	#header .brand img {
		max-height: 3.2rem;
	}

    #header span.user i {
        font-size: 1.25rem;
        color: #1DABE7;
        margin-right: 0.50rem;
    }

    #header span.user a {
        color: #000;
        font-size: 1rem;
        font-weight: 700;
    }

    #header span.user a:hover {
        color: #1DABE7;
    }

/*---------------------------------------------- 
	3. Page Login
------------------------------------------------*/
    #page-content.page-login {
        padding: 18vh 0;
    }

    #page-content.page-login .content {
        background: #FFF;  
        padding: 2.5rem 1.5rem;
    }

	#page-content.page-login .tml input.tml-field {
		width: 17.5rem;
	    height: 50px;
		font-size: 16px;
		line-height: 1;
		padding: 0.6rem 1.2rem;
		color: #000;
		background-color: #FFF;
		border: 1px solid #707070 !important;
		box-shadow: none;
        background-image: none;
		margin-bottom: 0.5rem;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px; 
	}

    #page-content.page-login .tml .tml-field-wrap {
        margin: 0;
    }

	#page-content.page-login .tml button {
        font-size: 0.9rem;
        font-weight: 400;
		line-height: 1rem;
		padding: 0.8rem 2rem;
		background: #00ABE7;
		color: #FFF;	
		border: none;	
        margin-top: 15px;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px; 	
	}
	
	#page-content.page-login .tml button:hover {
		background: #000;
		color: #FFF;
		border: none;
		text-decoration:none;
	}

    #page-content.page-login .tml ul.tml-links {
        list-style: none;
        margin-top: 1rem;
    }

    @media all and (max-width: 1440px) {
        #page-content.page-login {
            padding: 5rem 0;
        }
	}

/*---------------------------------------------- 
	4. Footer 
------------------------------------------------*/
	#footer {
        padding: 2rem 0 6rem 0;
        min-height: 12rem;
        background: #FFBF00;
        border-top: 12px solid #FFF;
        background-image:url("../images/footer-bg.svg") !important;
        background-repeat: no-repeat !important;
        background-position: center;
	}

    #footer img {
        max-height: 3.25rem;
    }

    #footer .btn {
        background: #000;
    }

     #footer .btn:hover {
        background: #106DB7;
    }

    #footer a.phone {
        font-size: 1.25rem;
        color: #000;
        background: #FFF;
        line-height: 2.5rem;
        height: 2.5rem;
        width: 2.5rem;
        text-align: center;
        display: inline-block;
    }

    #footer a.phone:hover {
        background: #000;
        color: #FFF;
    }